export function renderAreas()

in packages/charts/src/chart_types/xy_chart/renderer/canvas/areas.ts [28:86]


export function renderAreas(
  ctx: CanvasRenderingContext2D,
  imgCanvas: HTMLCanvasElement,
  areas: Array<PerPanel<AreaGeometry>>,
  sharedStyle: SharedGeometryStateStyle,
  rotation: Rotation,
  renderingArea: Dimensions,
  highlightedLegendItem?: LegendItem,
) {
  withContext(ctx, () => {
    // first render all the areas and lines
    areas.forEach(({ panel, value: geom }) => {
      const clippings = getPanelClipping(panel, rotation);
      if (geom.style.area.visible) {
        withPanelTransform(
          ctx,
          panel,
          rotation,
          renderingArea,
          () => renderArea(ctx, imgCanvas, geom, sharedStyle, clippings, highlightedLegendItem),
          { area: clippings, shouldClip: true },
        );
      }
      if (geom.style.line.visible) {
        withPanelTransform(
          ctx,
          panel,
          rotation,
          renderingArea,
          () => renderAreaLines(ctx, geom, sharedStyle, clippings, highlightedLegendItem),
          { area: clippings, shouldClip: true },
        );
      }
    });
    // now we can render the visible points on top of each the areas/lines
    areas.forEach(({ panel, value: { style, seriesIdentifier, points, hasFit, minPointDistance } }) => {
      const geometryStyle = getGeometryStateStyle(seriesIdentifier, sharedStyle, highlightedLegendItem);
      withPanelTransform(
        ctx,
        panel,
        rotation,
        renderingArea,
        () =>
          renderPoints(
            ctx,
            points,
            geometryStyle,
            style.point,
            style.line.strokeWidth,
            minPointDistance,
            style.pointVisibilityMinDistance,
            // has a connecting line only if is fit and there are more than one point on the chart
            hasFit && points.length > 1,
          ),
        { area: getPanelClipping(panel, rotation), shouldClip: points[0]?.value.mark !== null },
      );
    });
  });
}