renderAsMask()

in packages/charts/src/chart_types/partition_chart/renderer/dom/highlighter.tsx [148:222]
72 lines of code
4 McCabe index (conditional complexity)

  renderAsMask() {
    const {
      chartId,
      canvasDimension: { width },
      highlightSets,
    } = this.props;

    const maskId = (ind: number, ind2: number) => `echHighlighterMask__${chartId}__${ind}__${ind2}`;

    const someGeometriesHighlighted = highlightSets.some(({ geometries }) => geometries.length > 0);
    const renderedHighlightSet = someGeometriesHighlighted ? highlightSets : [];

    return (
      <>
        <defs>
          {renderedHighlightSet
            .filter(({ geometries, outerRadius }) => geometries.length > 0 && outerRadius > 0)
            .map(
              ({
                geometries,
                geometriesFoci,
                diskCenter,
                index,
                innerIndex,
                layout,
                marginLeftPx,
                marginTopPx,
                panel: { innerWidth, innerHeight },
              }) => (
                <mask key={maskId(index, innerIndex)} id={maskId(index, innerIndex)}>
                  <rect x={marginLeftPx} y={marginTopPx} width={innerWidth} height={innerHeight} fill="white" />
                  <g transform={`translate(${diskCenter.x}, ${diskCenter.y})`}>
                    {renderGeometries(geometries, layout, { color: Colors.Black.keyword }, geometriesFoci, width)}
                  </g>
                </mask>
              ),
            )}
        </defs>
        {renderedHighlightSet
          .filter(({ outerRadius }) => outerRadius > 0)
          .map(
            ({
              diskCenter,
              outerRadius,
              index,
              innerIndex,
              layout,
              marginLeftPx,
              marginTopPx,
              panel: { innerWidth, innerHeight },
            }) =>
              isSunburst(layout) ? (
                <circle
                  key={`${index}__${innerIndex}`}
                  cx={diskCenter.x}
                  cy={diskCenter.y}
                  r={outerRadius}
                  mask={`url(#${maskId(index, innerIndex)})`}
                  className="echHighlighter__mask"
                />
              ) : (
                <rect
                  key={`${index}__${innerIndex}`}
                  x={marginLeftPx}
                  y={marginTopPx}
                  width={innerWidth}
                  height={innerHeight}
                  mask={`url(#${maskId(index, innerIndex)})`}
                  className="echHighlighter__mask"
                />
              ),
          )}
      </>
    );
  }