_renderCrosshair()

in modules/monochrome/src/metric-card/chart.js [248:324]

• 72 lines of code
• 7 McCabe index (conditional complexity)

  _renderCrosshair() {
    const {highlightValues} = this.props;

    if (!highlightValues) {
      return null;
    }

    const {
      theme,
      style,
      unit,
      dataFilter,
      formatTitle,
      formatValue,
      getX,
      getY,
      getY0,
      xDomain
    } = this.props;
    const keys = Object.keys(highlightValues).filter(key => {
      const value = highlightValues[key];
      const x = getX(value);
      return dataFilter(key) && (!xDomain || (x >= xDomain[0] && x <= xDomain[1]));
    });

    const crosshairItems = keys.map((key, i) => {
      const value = highlightValues[key];
      const color = this._getColor(key);
      const x = getX(value);
      const y = getY(value);
      const y0 = getY0(value);
      const styleProps = {
        theme,
        name: key,
        displayName: formatTitle(key),
        color,
        isFirst: i === 0,
        isLast: i === keys.length - 1
      };

      return {
        x,
        y,
        title: (
          <CrosshairItemTitle {...styleProps} userStyle={style.crosshairTitle}>
            <CrosshairItemLegend {...styleProps} userStyle={style.crosshairLegend} />
            {styleProps.displayName}
          </CrosshairItemTitle>
        ),
        value: (
          <CrosshairItemValue {...styleProps} userStyle={style.crosshairValue}>
            {Number.isFinite(y0) && `${formatValue(y0)}, `}
            {formatValue(y)}
            {unit && <span>{unit}</span>}
          </CrosshairItemValue>
        ),
        color
      };
    });

    return [
      <Crosshair
        key="crosshair"
        values={crosshairItems}
        titleFormat={() => null}
        itemsFormat={values => values}
      />,
      <MarkSeries
        key="hovered-values"
        data={crosshairItems}
        stroke="#fff"
        strokeWidth={2}
        getFill={d => d.color}
        fillType="literal"
      />
    ];
  }