🪟 🧹 Round credits values on credit consumption page #21873
Conversation
teallarson
changed the title
| <Tooltip | ||
| cursor={{ fill: chartHoverFill }} | ||
| formatter={(value: number) => { | ||
| return [<FormattedNumber value={value} />, yLabel]; |
There was a problem hiding this comment.
This is non-intuitive. Rechart renders this as:
`${yLabel}: ${value}`
They need to be returned in this order ([value, name]) to use their built-in Tooltip component. Previously, we just rendered `Value : ${value}` here. Given the nature of bar graphs, it seems safe to label them how I have here and use the actual unit/label.
| Cell: ({ cell }: CellProps<FullTableProps>) => <UsageValue>{cell.value}</UsageValue>, | ||
| Cell: ({ cell }: CellProps<FullTableProps>) => ( | ||
| <UsageValue> | ||
| <FormattedNumber value={cell.value} /> |
There was a problem hiding this comment.
Did you consider whether to use minimumFractionDigits/maximumFractionDigits to always show a set number of decimal points? Not sure I have a strong opinion, just curious if that might look better for consistency (e.g. 0.00 instead of 0). IMO 2 decimal digits should be enough (.01 credit = $0.02, no need to go much more granular than that)
There was a problem hiding this comment.
Agree. I was also on the fence about it but the existing usage (credits remaining) didn't do that. I'll swap them all out!
| @@ -142,7 +142,11 @@ const UsagePerConnectionTable: React.FC<UsagePerConnectionTableProps> = ({ credi | |||
| accessor: "creditsConsumed", | |||
| collapse: true, | |||
| customPadding: { right: 0 }, | |||
| Cell: ({ cell }: CellProps<FullTableProps>) => <UsageValue>{cell.value}</UsageValue>, | |||
| Cell: ({ cell }: CellProps<FullTableProps>) => ( | |||
| <UsageValue> | |||
There was a problem hiding this comment.
Could we maybe get rid of the styled component here while we're in this file? 😇
There was a problem hiding this comment.
Yep! There's still some things with alignment that I'd like to tackle, but those are in the <Table/> component and don't belong in this PR.
teallarson
force-pushed
the
teal/round-credits-values
branch
from
f5cd4a2 to
0d9eab0
Compare
What
closes https://github.com/airbytehq/airbyte-cloud/issues/4121
Rounds credit data to the approriate place per Intl standards.
How
Utilizes
<FormattedNumber />from React-Intl in the table as well as in the bar graph component.Recommended reading order
any