Improve image graph axis display in email reports

[bx80]

Description:

Fixes #17747

When using the 🇫🇷 French language locale, numbers with thousand separators are shown with boxes instead of the expected separator. This is because the number formatter is using a narrow non-breaking space (NNBSP) as the thousand separator which is not supported by all fonts.

This PR makes the following changes to image graphs:

• If the unifont is available then it will be used for French and the NNBSP will be shown correctly.
• If the unifont is not available, then the narrow non-breaking space character will be replaced with a normal space so it displays correctly.
• Graph margins have been increased to avoid clipping the axis labels when using the unifont.

This is the same report using unifont:

And again without unifont:

Review

• Functional review done
• Potential edge cases thought about (behavior of the code with strange input, with strange internal state or possible interactions with other Matomo subsystems)
• Usability review done (is anything maybe unclear or think about anything that would cause people to reach out to support)
• Security review done
• Wording review done
• Code review done
• Tests were added if useful/possible
• Reviewed for breaking changes
• Developer changelog updated if needed
• Documentation added if needed
• Existing documentation updated if needed

[bx80]

@sgiehl I haven't added a UI test for this yet as it would require a report with >1,000 visits and the UI test fixture only has 514 visits in total. Modifying the omnifixture to add another 500 visits which will then slow down all UI test suites doesn't seem like a good idea for a single test. Any other suggestions?

[michalkleiner]

Could the same issue occur on the x-axis? Could there be a report that has thousands on the x-axis and would be affected by the same problem? Wondering whether we should apply this to all point labels on any axis in a more generic way.

[bx80]

It's the formatXAxis method itself which is introducing the problem character, so since we don't have any method that applies similiar number formatting to the X axis then this shouldn't be an issue.

[michalkleiner]

This looks good to me but would still prefer @sgiehl's review as well.

[sgiehl]

Looking at the changed screenshots it looks like the adjustments were actually only needed for the evolution chart.
The other charts now have additional unused space. Wouldn't it been have possible to only adjust the evolution one?

[bx80]

The other charts are also drawn very close to the edge of the image, for example the horizontal bar chart would likely clip the bar totals for numbers with four digits. I think adding few extra pixels of padding around them reduces the likelihood of other clipping issues and will look better if the images are embedded with other text.

[sgiehl]

I guess we would actually need to automatically increase those margins if higher values are meant to be printed.
It might make sense to adjust the UI tests so they use higher values. I think we could achieve that without tracking additional numbers but simply modifying the results. I'll try something an maybe push some changes here to achieve that if easily possible.

[sgiehl]

@bx80 I've pushed some changes so the imagegraph tests run with higher values. Feel free to check if that looks good to you. Otherwise I think this PR would be read to merge.

[bx80]

Thanks @sgiehl, the tests should be more robust with higher values 👍