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	❌ Failed (Inspect)			Jul 1, 2024 2:42pm

[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.

[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.

[evasseure]

Hello @plouc! Any chance you can have a look at the changes soon please? They are pretty light 🙂

[plouc]

@evasseure, it looks good, I think we should adjust the labelPosition though.

There's another limitation, it's the fact that labels aren't in a separate layer, causing the labels to be under the bars in certain cases, I wouldn't be surprised if some users report this as an issue, but maybe that's ok.

[evasseure]

I think we should adjust the labelPosition though.

My bad, forgot about this. Should be good now.

There's another limitation, it's the fact that labels aren't in a separate layer, causing the labels to be under the bars in certain cases, I wouldn't be surprised if some users report this as an issue, but maybe that's ok.

That's one of the issue with giving full control over the labelOffset. That's up to you 😕

[plouc]

That's one of the issue with giving full control over the labelOffset. That's up to you 😕

I think it's fine for now, labels should eventually be on their own layer, I don't remember exactly why I merged them with the bars, maybe for performance.

[bradlocking]

@plouc Thanks for merging this feature. Am I right in presuming that the docs have been updated with the labelPosition functionality, but the feature is yet to be released to npm?

[plouc]

@bradlocking, yes, you're right, the workflow is not ideal as the website is updated automatically, but releases aren't automatically published. I'll try to release this week if I can find some time.

[bradlocking]

@bradlocking, yes, you're right, the workflow is not ideal as the website is updated automatically, but releases aren't automatically published. I'll try to release this week if I can find some time.

Cheers! No probs it was a nice coincidence that the function I needed was in the pipeline anwyay

[MonkeyDo]

@bradlocking, yes, you're right, the workflow is not ideal as the website is updated automatically, but releases aren't automatically published. I'll try to release this week if I can find some time.

Cheers! No probs it was a nice coincidence that the function I needed was in the pipeline anwyay

Same here, except it was only this week I ran into the need for this new option. The timing is impeccable.

@plouc Thank you so much for your time and energy!
Could I potentially help in setting up automated package deployments with Github?
I have been working on a deployment workflow for an open source project I maintain, I'd be happy to help.

[bradlocking]

@plouc Shameless bump - is there anything I can do to help get this feature live?

[joesaunderson]

@plouc sorry to bump the above, I have just encountered the same issue as above, the docs mis-matching the code i have.

[plouc]

Sorry for that, I'm quite busy with work atm, will do my best to release as soon as I can.

[nickfarm27]

Hey @plouc, bumping the above once again. I'm looking to make use of this feature but it seems like a release still hasn't been made. Is it possible to make a release asap?

[bradlocking]

Second the above. It's been over 2 months since my initial comment, and even longer that it's been live as an option in your docs but not deployed functionality.

[Anubiso]

Also going to +1 this. Decided for this library for my use-case because i could configure it as the case needed it on the docs-website. When then trying to implement this in the project failed because the docs show features which are not supported yet in a usable release.

[ssindher11]

Hey @plouc, any updates on releasing this feature?

[joesaunderson]

+1 on the above.

I know this is not a paid service, but for transparency is it worth marking this repo as abandoned and letting someone else take a fork?

The PR (and the docs) were updated 5 months ago. So we are 5 months of the docs being different to what's actually possible in the real life repo.

[bradlocking]

@plouc We are actively using your library as part of an enterprise application. Could you give us an update as to whether you're going to struggle to maintain the software moving forward so that we can start planning potential replacements?

[tarjep]

+1
Does anyone know about a workaround for this?

[MonkeyDo]

+1 Does anyone know about a workaround for this?

Hello, here is my workaround: use the barComponent property to create a custom bar component in order to render bar and labels.
In my case, using the SVG version of the component, I opted for an svg foreignObject which allowed me to put an HTML div inside the SVG and style that accordingly with CSS.

The code in question: https://github.com/metabrainz/listenbrainz-server/blob/2dd924590d45f1a63d0d9ea3ecf2c01e9815e3fb/frontend/js/src/user/charts/UserEntityChart.tsx#L57-L77
And used like this: https://github.com/metabrainz/listenbrainz-server/blob/2dd924590d45f1a63d0d9ea3ecf2c01e9815e3fb/frontend/js/src/user/charts/UserEntityChart.tsx#L333

The result: