search

evidence-dev / evidence

Business intelligence as code: build fast, interactive data visualizations in pure SQL and markdown
https://evidence.dev
MIT License
4.4k stars 210 forks source link

[Bug]: Bar chart inside Data Table should align to the right when Column aligns right #2725

Open kmitchener opened 1 week ago

kmitchener commented 1 week ago

Describe the bug

Current behavior when column is aligned right with a bar chart in it:

<Column id=last_month_cost fmt=usd title="Last Month AWS Cost" align=right contentType=bar />

Current behaviour

Image

Desired behavior

Image

Steps to Reproduce

Create datatable with column aligned right with bar chart inside. Example column description above.

Severity

annoyance

archiewood commented 1 week ago

Hey @kmitchener, what would your expected behaviour be here for negative values?

hughess commented 1 week ago

Can you achieve this by making the values in the column negative, then adjust the fmt?

archiewood commented 1 week ago

Negative values could be flipped in the opposite direction, but this might be confusing

Image

Current left align behaviour for reference

Image

archiewood commented 1 week ago

Here's a live proof of concept: https://deploy-preview-2726--next-docs-evidence.netlify.app/components/data-table/#bar-chart-column---right-aligned

kmitchener commented 1 week ago

That looks great to me. In my use case, I won't have mixed positive and negative values. For your POC, I wonder how that would look with much larger negative values?

archiewood commented 5 days ago

I'm not loving this approach honestly. I wonder if it would be better to introduce a new independent prop to control this eg barAlign=right I think some users are likely to want the text to be right aligned, but the bar not