Allow customization of time format #22339

breakthestatic · 2024-10-11T22:15:46Z

Proposed change

This change adds the ability to use alternative (i.e. shorter) forms for time values where state-display is used. My primary goal was to make my badges that showed relative time a bit more concise. However, I think it could be generally useful anywhere that these formatted time strings are used (hence the expansion to the tile card).

I'm not really sold on the name of the property though; time_verbosity seems a bit clunky. Perhaps time_format or relative_time_format are more appropriate. I originally avoided those names because I did see a few other time-format-related props and didn't want to add confusion. If you have a better name for this property, I'd be more than happy to change it!

Also, I wanted to bring up the fact that the positional arguments to relativeTime are becoming more unwieldy with this addition. I thought about migrating to named props, but relativeTime is used somewhat extensively throughout the codebase and I didn't want to introduce such a large change without getting feedback from the team first.

Other thoughts:

I think this is likely a more advanced use-case and should be YAML-only.
I don't think it needs to be configurable per state-item. The provided format should be used for all state_content pieces.
Documentation PR has not been created yet, as I wasn't sure if this PR would be accepted and if the form would change based on review comments.

Type of change

Dependency upgrade
Bugfix (non-breaking change which fixes an issue)
New feature (thank you!)
Breaking change (fix/feature causing existing functionality to break)
Code quality improvements to existing code or addition of tests

Example configuration

Badge config (also works on tile cards):

type: entity
entity: sensor.sun_next_dusk
time_verbosity: narrow

Additional information

This PR fixes or closes issue: fixes #
This PR is related to issue or discussion:
Link to documentation pull request:

Checklist

The code change is tested and works locally.
There is no commented out code in this PR.
Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

Documentation added/updated for www.home-assistant.io

marcinbauer85 · 2024-11-04T08:28:36Z

This can be just in YAML and described in the documentation.

karwosts · 2024-11-05T18:29:36Z

I'm not really sold on the name of the property though

What if you didn't make a new property at all, and just added options the existing format property? Could add relative_narrow or relative_short as additional options here.

piitaya · 2024-11-26T08:40:22Z

I agree with @karwosts. We can simply use the time_format property and we can implement it in entity badge and tile card. Do you want to do the changes @breakthestatic or should I take the feature?

breakthestatic · 2024-11-26T15:38:59Z

I can take care of it. I have most of the changes ready in a separate branch. Didn't want to push them here early, in the event that wasn't the route you wanted to take.

bramkragten · 2024-11-27T12:00:57Z

src/state-display/state-display.ts

-    if (content === "state") {
+    if (
+      content === "state" ||
+      (this.format && TIMESTAMP_RENDERING_FORMATS.includes(this.format))


I don't think we can do this, as relative time is also used for things like last_triggered, etc.

Yeah, it was something I threw in somewhat last minute when I saw the alternative state_content timestamps weren't respecting the format. Would adding more specific guards for the other state content types be an acceptable alternative?

I can't recall the specifics surrounding this, but I believe it had something to do with secondary info. Regardless, without that extra information I can't properly defend the change 😆, so I've removed this in the latest commit.

bramkragten · 2024-11-27T12:03:44Z

src/state-display/state-display.ts

@@ -133,6 +142,7 @@ class StateDisplay extends LitElement {
        <ha-relative-time
          .hass=${this.hass}
          .datetime=${relativeDateTime}
+          .format=${this.format}


This would not be used ever, as we already would have returned the content === state part?

I have to check this, but I'm pretty sure I saw this being reached at some point during my testing. I'll investigate a bit more and provide any pertinent data.

This is definitely being hit frequently in my intended use-case (binary motion sensors displaying the last changed time).

The original content === state part is only hit when we explicitly want to render the base/default state item (and it additionally has the "correct" device class or domain). When content === "last_changed" for example, the requested format needs to be respected still.

Note the new formats are opt-in; when format - a new prop - isn't passed, it defaults to relative (aka long in the Intl library) which is existing behavior for both ha-relative-time and hui-timestamp-display.

With the removal of the code from the previous comment it does.

bramkragten · 2024-12-22T16:37:25Z

src/panels/lovelace/cards/types.ts

@@ -515,6 +515,7 @@ export interface TileCardConfig extends LovelaceCardConfig {
  icon_hold_action?: ActionConfig;
  icon_double_tap_action?: ActionConfig;
  features?: LovelaceCardFeatureConfig[];
+  format?: TimestampRenderingFormat;


You should also add this to the struct in hui-tile-card-editor

bramkragten · 2024-12-22T16:38:17Z

src/panels/lovelace/badges/types.ts

@@ -42,6 +43,7 @@ export interface EntityBadgeConfig extends LovelaceBadgeConfig {
  tap_action?: ActionConfig;
  hold_action?: ActionConfig;
  double_tap_action?: ActionConfig;
+  format?: TimestampRenderingFormat;


You should also add this to the struct in hui-entity-badge-editor

home-assistant bot added cla-signed hacktoberfest labels Oct 11, 2024

bramkragten assigned piitaya Nov 13, 2024

Additional relative time formats

97070e7

breakthestatic force-pushed the state-display-time-formatting branch from 400ee51 to 97070e7 Compare November 27, 2024 03:34

Fix fallback case

547a218

bramkragten reviewed Nov 27, 2024

View reviewed changes

breakthestatic added 2 commits December 12, 2024 10:28

Merge branch 'dev' into state-display-time-formatting

c540474

Revert alternative state content condition

c3f7d45

breakthestatic requested a review from bramkragten December 12, 2024 19:59

bramkragten reviewed Dec 22, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Allow customization of time format #22339

Allow customization of time format #22339

breakthestatic commented Oct 11, 2024

marcinbauer85 commented Nov 4, 2024

karwosts commented Nov 5, 2024

piitaya commented Nov 26, 2024

breakthestatic commented Nov 26, 2024

bramkragten Nov 27, 2024

breakthestatic Nov 27, 2024

breakthestatic Dec 12, 2024

bramkragten Nov 27, 2024 •

edited

Loading

breakthestatic Nov 27, 2024

breakthestatic Dec 12, 2024

bramkragten Dec 22, 2024

bramkragten Dec 22, 2024

bramkragten Dec 22, 2024

Allow customization of time format #22339

Are you sure you want to change the base?

Allow customization of time format #22339

Conversation

breakthestatic commented Oct 11, 2024

Proposed change

Type of change

Example configuration

Additional information

Checklist

marcinbauer85 commented Nov 4, 2024

karwosts commented Nov 5, 2024

piitaya commented Nov 26, 2024

breakthestatic commented Nov 26, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bramkragten Nov 27, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bramkragten Nov 27, 2024 •

edited

Loading