fix(heatmap): respect margins and paddings

[mariairiartef]

Summary

The margins and paddings are applied correctly for heatmap chart configuration theme.

Small multiples

Brush mask and area

Screen.Recording.2025-01-20.at.16.11.46.mov

Details

Add debug option so when is active elements such as margins, paddings, chart dimensions and chart container dimensions are visible.

Issues

fix #2216

Checklist

• The proper chart type label has been added (e.g. :xy, :partition)
• The proper feature labels have been added (e.g. :interactions, :axis)
• All related issues have been linked (i.e. closes #123, fixes #123)
• Unit tests have been added or updated to match the most common scenarios
• The proper documentation and/or storybook story has been added or updated
• The code has been checked for cross-browser compatibility (Chrome, Firefox, Safari, Edge)

[markov00]

buildkite test this

[mariairiartef]

The methods in the line.ts, rect.ts and text.ts files were extracted from packages/charts/src/chart_types/xy_chart/renderer/canvas/primitives folder. In other to avoid duplicates, we need to use these methods in the xy_chart from the packages/charts/src/renderers/canvas/primitives folder.

As we don't want to increase the number of files, we will do this change in a separate PR.

[mariairiartef]

Created #2586

[markov00]

You can probably remove these methods and call directly the renderDebugRect passing the right style and dimension

[mariairiartef]

if it is not used in any other place we can remove it and call it directly. But I think that creating a method and calling them with its name looks clearer:

() => debug && renderMargins(ctx, chartContainerDimensions, chartMargins),
() => debug && renderPaddings(ctx, chartContainerDimensions, chartDimensions, chartMargins, chartPaddings),
() => debug && renderChartContainerDimensions(ctx, chartContainerDimensions),
() => debug && renderChartDimensions(ctx, chartDimensions),

[markov00]

Suggested change

	const greenSemiTransparent = [...Colors.Green.rgba.slice(0, 3), 0.5] as RgbaTuple;
	const lightBlueSemiTransparent = [...Colors.LightBlue.rgba.slice(0, 3), 0.5] as RgbaTuple;
	const greenSemiTransparent = [...Colors.Green.rgba.slice(0, 3), 0.5] satisfies RgbaTuple;
	const lightBlueSemiTransparent = [...Colors.LightBlue.rgba.slice(0, 3), 0.5] satisfies RgbaTuple;

[markov00]

You can probably even move these const within each function method. There is no benefit of having that there. These methods are also just for debug purposes so they are not called frequently

[markov00]

nit:

Suggested change

	chartContainerDimensions: Dimensions,
	chartDimensions: Dimensions,
	chartMargins: PerSideDistance,
	chartPaddings: PerSideDistance,
	container: Dimensions,
	chart: Dimensions,
	margins: PerSideDistance,
	paddings: PerSideDistance,

It could be nice to start cleaning up a bit these naming and reducing redundant labels.

[elastic-datavis]

✅ Successful Deployment (build#4421) - 6fcafae

• Docs
• Storybook
• e2e server
• Playwright report