render()

in packages/charts/src/chart_types/xy_chart/renderer/dom/highlighter.tsx [61:129]
63 lines of code
8 McCabe index (conditional complexity)

  render() {
    const { chartDimensions, chartRotation, chartId, zIndex, isBrushing, style } = this.props;
    if (isBrushing) return null;
    const clipWidth = [90, -90].includes(chartRotation) ? chartDimensions.height : chartDimensions.width;
    const clipHeight = [90, -90].includes(chartRotation) ? chartDimensions.width : chartDimensions.height;
    const clipPathId = `echHighlighterClipPath__${chartId}`;

    const seenBarSeries = new Set<string>();
    const highlightedGeometries = this.props.highlightedGeometries.filter((geom) => {
      if (!isBarGeometry(geom)) return true;
      const seen = seenBarSeries.has(geom.seriesIdentifier.key);
      seenBarSeries.add(geom.seriesIdentifier.key);
      return !seen;
    });

    return (
      <svg className="echHighlighter" style={{ zIndex }}>
        <defs>
          <clipPath id={clipPathId}>
            <rect x="0" y="0" width={clipWidth} height={clipHeight} />
          </clipPath>
        </defs>

        {highlightedGeometries.map((geom, i) => {
          const { panel } = geom;
          const x = geom.x + geom.transform.x;
          const y = geom.y + geom.transform.y;
          const geomTransform = getTransformForPanel(panel, chartRotation, chartDimensions);

          if (isPointGeometry(geom)) {
            const fillColor = getColorFromVariant(RGBATupleToString(geom.style.fill.color), style.point.fill);
            const strokeColor = getColorFromVariant(RGBATupleToString(geom.style.stroke.color), style.point.stroke);

            const radius = Math.max(geom.radius, style.point.radius);
            const { d, rotate } = renderPath(geom, radius);
            return (
              <g
                key={i}
                transform={geomTransform}
                clipPath={geom.value.mark !== null ? `url(#${clipPathId})` : undefined}
              >
                <path
                  d={d}
                  transform={`translate(${x}, ${y}) rotate(${rotate || 0})`}
                  fill={fillColor}
                  stroke={strokeColor}
                  strokeWidth={style.point.strokeWidth}
                  opacity={style.point.opacity}
                />
              </g>
            );
          }

          return (
            <rect
              key={i}
              x={x}
              y={geom.y}
              width={geom.width}
              height={geom.height}
              transform={geomTransform}
              className="echHighlighterOverlay__fill"
              clipPath={`url(#${clipPathId})`}
            />
          );
        })}
      </svg>
    );
  }