color: colorToRgba()

in packages/charts/src/chart_types/heatmap/layout/viewmodel/viewmodel.ts [204:290]


        color: colorToRgba(heatmapTheme.cell.border.stroke),
        width: heatmapTheme.cell.border.strokeWidth,
      },
      value: d.value,
      visible: !isValueInRanges(d.value, bandsToHide),
      formatted: formattedValue,
      fontSize,
      textColor: fillTextColor(background.fallbackColor, cellBackgroundColor, background.color).color.keyword,
    });
    return acc;
  }, new Map());

  const getScaledSMValue = (value: number | string, scale: 'horizontal' | 'vertical') => {
    return hasSMDomain(smScales[scale]) ? smScales[scale].scale(value) : 0;
  };

  const getPanelPointCoordinate = (value: Pixels, scale: 'horizontal' | 'vertical') => {
    const category = smScales[scale].invert(value) ?? '';
    const panelOffset = getScaledSMValue(category, scale);
    const invertedScale = scale === 'horizontal' ? xInvertedScale : yInvertedScale;

    return {
      category,
      panelOffset,
      panelPixelValue: value - panelOffset,
      panelValue: invertedScale(value - panelOffset),
    };
  };

  const getPanelPointCoordinates = (x: Pixels, y: Pixels) => {
    const {
      category: v,
      panelValue: panelY,
      panelOffset: panelOffsetY,
    } = getPanelPointCoordinate(y - chartDimensions.top, 'vertical');
    const {
      category: h,
      panelValue: panelX,
      panelOffset: panelOffsetX,
    } = getPanelPointCoordinate(x - chartDimensions.left, 'horizontal');

    return {
      x: panelX,
      y: panelY,
      v,
      h,
      panelOffsetY,
      panelOffsetX,
    };
  };

  // TODO: Make this method more precise to avoid Y title
  const isPointWithinYLabelArea = (x: Pixels, y: Pixels) =>
    x > chartMargins.left &&
    x < chartDimensions.left - chartPaddings.left &&
    y > chartDimensions.top &&
    y < chartDimensions.top + chartDimensions.height;

  /**
   * Returns the corresponding x & y values of grid cell from the x & y positions
   * @param x
   * @param y
   */
  const pickGridCell = (x: Pixels, y: Pixels): GridCell | undefined => {
    if (x < chartDimensions.left || y < chartDimensions.top) return undefined;
    if (x > chartDimensions.width + chartDimensions.left || y > chartDimensions.top + chartDimensions.height)
      return undefined;

    const xValue = xInvertedScale(x - chartDimensions.left);
    const yValue = yInvertedScale(y);

    if (xValue === undefined || yValue === undefined) return undefined;

    return { x: xValue, y: yValue };
  };

  /**
   * Returns selected elements based on coordinates.
   * @param x
   * @param y
   */
  const pickQuads = (x: Pixels, y: Pixels): Array<Cell> | TextBox => {
    if (isPointWithinYLabelArea(x, y)) {
      // look up for a Y axis elements
      const { y: yLabelKey } = getPanelPointCoordinates(x, y);
      const yLabelValue = textYValues.find((v) => v.value === yLabelKey);
      if (yLabelValue) {