Filterable table column with dynamic unit
I develop a dashboard for telecommunications service monitoring. In a couple of tables there is an Outage column, which shows the outage in days. In most cases the outage is longer than 1 day, but sometimes it's less, for example 0.2 days. The users of the dashboard asked me to show the outage in hours in these cases.
Currently the outage is shown right-aligned, with 1 fractional digit precision (for example, 0.1, 0.7, 2.5, 23.4, 128.0 etc.). The table header contains a filter field, so if someone wants to display only outages longer than a week, they type ">7" into the filter field. In my opinion, this is a simple and usable solution, so I'd like to keep the column values in days. Even the users don't want me to change the unit to hours in all cases, only if the outage is <1 day.
My table component is capable of showing strings or even HTML elements in the cells, created based on the value of a field. So at first I changed the displayed string to also show the hours if the outage is <1 day, for example: "0.2 (4.8 hours)". But this ruins the nice right-alignedness of the numbers, and neither me, nor the users really like it. To keep right-alignedness I could change the order like this: "(4.8 hours) 0.2", but this looks funny. I tried to put the "(4.8 hours)" part into a <span>
and apply a CSS class to make it gray, which makes it a bit better-looking. I also thought of putting the "0.2" into a <span>
and adding a tooltip to it with the text "4.8 hours".
Is there a good solution to this problem?
EDIT: I ended up using a span that shows the outage in "hours:minutes" format. I use smaller, gray font in order not to "disturb" the value given in days.