Formatting numbers

[stevieflow]

Numbers are important in IATI data. Making numbers, particularly large ones, legible is vital.

Here's how the Dashboard - which I assume uses the design-system for its numbers - displays some numbers:

I have to think to parse these numbers into the relevant thousands

Interestingly, other parts of the dashboard display numbers so:

Meanwhile - here's how CDFD (that doesnt currently use the ds) displays some numbers

There's less overhead to understand these numbers, by the use of digit grouping

Can / could the design-system determine this, or is it down to the individual tool to do so?

The latter position seems counterintuitive

--> @tillywoodfield @robredpath @chrisarridge

Thanks

---

Note:
We also know that there are various standards for doing this - eg:

100,0000
100.000
100 000

....may be used in different circumstances. @codemacabre has found a way to do that when switching between french and english for MapAfrica

[codemacabre]

Formatting these numbers will need to be done with JavaScript, as CSS can't perform this kind of formatting well.

I think it would be simpler to implement this in individual tools, but it might be able to be implemented in the design system provided the numbers are in reliable places, like table cells, etc.

I'd be interested in what @tillywoodfield thinks, as I'm still a little unfamiliar with this design system's philosophy.

[tillywoodfield]

I agree with @codemacabre, this isn't something we would likely use CSS for, and although technically we could provide some JavaScript function in the design system for this, the use-cases and technologies vary enough that I don't see it saving much effort over implementing it in individual tools.

Instead it could be good to add a section to the Storybook for things which aren't styles/components but rather guidance that we can point to for consistent ways of presenting information like this. Individual tools/consumers would then be responsible for applying/implementing it.

[stevieflow]

Great - thanks @codemacabre @tillywoodfield

I genuinely didn't know.

Instead it could be good to add a section to the Storybook for things which aren't styles/components but rather guidance that we can point to for consistent ways of presenting information like this. Individual tools/consumers would then be responsible for applying/implementing it.

Understood. I guess this is where the design-system and any "style guide" may intersect.

Shall I leave this ticket open, or close for now? Ill also update IATI/IATI-Dashboard#707

[chrisarridge]

I see this sort of functionality as part of the translation and localisation work that is going on. Number formatting is part of localisation and can be done in the templates that are part of the Django side of things. There is also a connection to the SSO work where, in principle, a user can store their number formatting preferences (via localisation) in their account so that when they interact with a tool in a logged-in state, we can use their preference to present the tool to them in a way that is meaningful to them (rather than by any sort of inference).

I like the idea of capturing this sort of thing in a guidance document in Storybook.

[robredpath]

The weekly call I have with @tillywoodfield about the design system is called "not-design-system" because we are really stretching the definition of a "design system" beyond its limits. However, what we're creating here is a useful thing that works in our context, and I think that's more important than worrying too much about exactly what it's called.

The Storybook already contains some important information that lives only in the text: for example that you're not allowed to add controls to the header and that the newsletter sign-up component of the footer should only be used if appropriate. I think it's entirely consistent to add further documentation about how tools should present things.

I think it would be useful as well to describe what good degradation from the ideal looks like: we are a long way off people even being able to log into lots of our tools, let alone using that for presentation. So, we might say:

• Ideally, do digit grouping based on the logged-in user's preferences
• If you can't do that, do it based on the selected language
• If you can't do that, just use English standard grouping
• Not having grouping isn't acceptable

I'll race all interested parties to get a PR in.