Target display issues with large numbers

Implementation Design
,
1

Hi everyone,

I’ve run into a UI issue with the target display: when large numbers are shown, the text starts to overlap

image (1)
image (1)1196×117 5.84 KB

.

Here’s an example (screenshot attached):

  • Current value: 7500

  • Goal: 100000
    The goal text is pushed too close to the number, making them overlap visually.

Smaller targets (like 2 of 4) look fine.

Thank you already in advance for your support!

2

Hi @xvoel ! Welcome to the forum. Thanks so much for taking the time to register and post your question! It’s always great to hear about real world situations out there with folks using the CHT.

This looks a bit tricky, especially as you get to numbers bigger than 10,000. For example, how should we display a target of 119,000 and a progress of 102,103?

That said, I think the original targets were something a CHW was envisioned to do inside of a month. A goal of 10k house visits, vaccinations or U5 assessments in a month simply isn’t fathomable! Are you able to share what you have a target of 10,000 of? I’d be interesting to hear what folks are doing 10k of in a month!

Also, would an acceptable work around be to use k to mean “1 thousand”? So in your case we might show a target of 10k and a progress of 7.5k. I think this way we could keep both the target and the status to no more than 4 characters, including the decimal.

3

I believe there is a related post How to cap target numbers in display?

4

Hi @mrjones
Thanks for the warm welcome! As @diana pointed out, the two posts concern the same use case.

The high numbers are linked to our redesigned P4P scheme. We have made it more pro-CHW and flexible:

  • CHWs no longer have a fixed goal for certain visits.

  • Instead, they earn a certain amount for each visit conducted (until a fixed maximum)

We would like the target card to display how much money (in TZS) the CHW has already earned. So, for each task they will obtain between 500 to 2000 TZS leading to such big numbers.

Regarding your question whether it would be acceptable to use k, I quickly have to ask my colleague.

5

Hi @mrjones

I have talked to a colleague. The notation with k is not commonly used here in Zanzibar, however, with the correct training, this could be a potential solution.

6

Thanks for the updates @xvoel ! It makes sense that localized use of numbers will differ and that k may not make sense. I’ve added a comment on the ticket that came out of the other thread which I hope accurately captures your issue.

We do not recommend making ad hoc changes to the CHT core and putting it into production, but if you would like to experiment in a local development setup with making changes the CSS on the reports page, there’s a write up on how to do this.

7

Thank you @mrjones for adding the specification to the ticket!

1 Like