feat(Bar): Add option to chose label position

[evasseure]

This adds two new props to the bar charts:

• labelPosition: defaults to 'middle', and allows to chose at which end of the bar the label should appear (start, middle, end)
• labelOffset: defaults to 0, and allows to chose the vertical or horizontal offset of the label. This depends on if the chart is horizontal or vertical.

➡️ DEMO

This is related to #2579.

Option	Result
Vertical - "end"
Vertical - "start"
Horizontal - "end"
Horizontal - "start"
Vertical - Stacked - "start"
Vertical - "end" - no offset
Vertical - "end" - reverse

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
nivo	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 7, 2024 9:36am

[plouc]

I noticed that for the reversed horizontal mode, end labels still have a start text anchor, I think it should be mirrored, as for the position, I was also wondering if the offset should be applied negatively as well in this mode.

[plouc]

But I should have started with: great work! 😅 You added tests, updated the website, stories... 👍🏻

[plouc]

Inverting the effect of the offset could also be done for the vertical reversed mode.

[plouc]

I remembered that we have a similar property for legendsContinuousColorsLegendProps, titleAlign, which uses 'start' | 'middle' | 'end', maybe we could use the same for consistency, what do you think?

[evasseure]

'start' | 'middle' | 'end' is used in quite a few places already, so it could make sense to factorize it a bit. Is there a specific way you would want to do that?

[plouc]

For now, I think we can just use the same values, and handle the rest in another PR.

[evasseure]

labels still have a start text anchor, I think it should be mirrored

Good idea, will update!

I was also wondering if the offset should be applied negatively as well in this mode.
...
Inverting the effect of the offset could also be done for the vertical reversed mode.

That's up to you, right now its consistent with the how the x and y axis work in svg and canvas, which could remove a bit of possible confusion, but we could also have the offset work relative to the base of the bar, if you think that's better.

[plouc]

I was also wondering if the offset should be applied negatively as well in this mode.
...
Inverting the effect of the offset could also be done for the vertical reversed mode.

That's up to you, right now its consistent with the how the x and y axis work in svg and canvas, which could remove a bit of possible confusion, but we could also have the offset work relative to the base of the bar, if you think that's better.

I think it's best to mirror the offset as we're already mirroring the position.

[evasseure]

I made it so the offset is based on the direction and start of the bar, so for a label positioned in the center, a negative offset will go towards the start of the bar, and a positive offset will go towards the end of the bar.
Is that what you had in mind?
@plouc

[evasseure]

Hello @plouc! Did you have time to look at my changes?

[plouc]

Hi @evasseure, I've been a bit busy, and it might be hard this week because of work, but I'll try to review asap.