Improve display of "duration" sensor

Olen · February 27, 2024, 1:48pm

The frontend needs a little bit of polish when it comes to Duration sensors.
Currently, if the duration is > 24 hours, it still only shows as either “HH:MM:SS” or HHH:MM:SS if the duration is really long…

It would be nice if it would show something like “D days, HH:MM” for longer durations.
Maybe even an option to skip seconds if more than X hours, skip minutes if more than Y days…

In a perfect world. this could be adjustible like other “Display precision”

And an improvement to the history chart would be if it showed the labels as the same (“D, HH:MM:SS”), not as the raw output from the sensor:

5000 minutes does not really say anything except “a pretty long time”

CO_4X4 · February 27, 2024, 5:58pm

Be sure to vote for your own request! While the feature request of the site doesn’t equate to a to-do list for the devs, it will inspire others to either offer solutions or maybe write an extension.

You do have a couple of ways now of addressing this. One would be to use something like Multiple Entities Row in your dashboard because it offers a nice selection of automatically formatting your time:

Or you could write a sensor template that fixes the number for you and just display that state instead.

Olen · February 27, 2024, 7:08pm

Thanks for the reminder.

You do have a couple of ways now of addressing this. One would be to use something like Multiple Entities Row in your dashboard because it offers a nice selection of automatically formatting your time:

Could be that it works better for durations > 24 hours, but I currently use a glance card for this so it would need some more work with the dashboard.

Or you could write a sensor template that fixes the number for you and just display that state instead.

That is what I currently do. But it is not ideal, especially since it does not solve the problem of the history view and statistics.

I think, for the first part, this only needs a little tweak here:

github.com

home-assistant/frontend/blob/29954e530e62ab3cc2788fb5ccf812d12d84899d/src/common/datetime/milliseconds_to_duration.ts

const leftPad = (num: number, digits = 2) => {
  let paddedNum = "" + num;
  for (let i = 1; i < digits; i++) {
    paddedNum = parseInt(paddedNum) < 10 ** i ? `0${paddedNum}` : paddedNum;
  }
  return paddedNum;
};

export default function millisecondsToDuration(d: number) {
  const h = Math.floor(d / 1000 / 3600);
  const m = Math.floor(((d / 1000) % 3600) / 60);
  const s = Math.floor(((d / 1000) % 3600) % 60);
  const ms = Math.floor(d % 1000);

  if (h > 0) {
    return `${h}:${leftPad(m)}:${leftPad(s)}`;
  }
  if (m > 0) {
    return `${m}:${leftPad(s)}`;
  }

This file has been truncated. show original

But I don’t know enough about the frontend here to be sure, so I can’t make a PR.

The history and more-info cards is way out of my league atm.