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 },
);
});
});
}