function getGridLinesForAxis()

in packages/charts/src/chart_types/xy_chart/utils/grid_lines.ts [64:122]


function getGridLinesForAxis(
  axisSpec: AxisSpec,
  visibleTicks: AxisTick[],
  themeAxisStyle: AxisStyle,
  panelSize: Size,
): GridLineGroup[] {
  // vertical ==> horizontal grid lines
  const isVertical = isVerticalAxis(axisSpec.position);

  // merge the axis configured style with the theme style
  const axisStyle = mergePartial(themeAxisStyle, axisSpec.style as RecursivePartial<AxisStyle>);
  const gridLineThemeStyle = isVertical ? axisStyle.gridLine.vertical : axisStyle.gridLine.horizontal;

  // axis can have a configured grid line style
  const gridLineStyles = axisSpec.gridLine ? mergePartial(gridLineThemeStyle, axisSpec.gridLine) : gridLineThemeStyle;

  if (!gridLineStyles.visible) {
    return [];
  }

  // define the stroke for the specific set of grid lines
  if (!gridLineStyles.stroke || !gridLineStyles.strokeWidth || gridLineStyles.strokeWidth < MIN_STROKE_WIDTH) {
    return [];
  }

  const visibleTicksPerLayer = visibleTicks.reduce<Map<number, AxisTick[]>>((acc, tick) => {
    if (Math.abs(tick.position - tick.domainClampedPosition) > OUTSIDE_RANGE_TOLERANCE) return acc; // no gridline for ticks outside the domain
    if (typeof tick.layer === 'number' && !tick.showGrid) return acc; // no gridline for ticks outside the domain
    if (HIDE_MINOR_TIME_GRID && typeof tick.layer === 'number' && tick.detailedLayer === 0) return acc; // no gridline for ticks outside the domain
    const ticks = acc.get(tick.detailedLayer);
    if (ticks) {
      ticks.push(tick);
    } else {
      acc.set(tick.detailedLayer, [tick]);
    }
    return acc;
  }, new Map());

  const strokeColor = overrideOpacity(colorToRgba(gridLineStyles.stroke), (strokeColorOpacity) =>
    gridLineStyles.opacity !== undefined ? strokeColorOpacity * gridLineStyles.opacity : strokeColorOpacity,
  );
  const stroke: Stroke = {
    color: strokeColor,
    width: gridLineStyles.strokeWidth,
    dash: gridLineStyles.dash,
  };

  return [...visibleTicksPerLayer]
    .sort(([k1], [k2]) => (k1 ?? 0) - (k2 ?? 0)) // increasing layer order
    .map(([, visibleTicksOfLayer]) => {
      const lines = visibleTicksOfLayer.map<Line>((tick: AxisTick) =>
        isVertical
          ? getGridLineForVerticalAxisAt(tick.position, panelSize)
          : getGridLineForHorizontalAxisAt(tick.position, panelSize),
      );

      return { lines, stroke, axisId: axisSpec.id };
    });
}