Timeline history graph - react to click to display entity more info

[k3a]

Proposed change

The timeline history graph card is great, however it lacks details.
Sometimes the intervals between changes are short (as in door sensors), and sometimes the sensor is unavailable for a short period of time, which is not very obvious from the graph.

Therefore, I enhanced the chart by adding a small inline plugin to handle clicking on a timeline element and firing "hass-more-info" to display the More info dialog of the displayed entity.

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

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

[home-assistant]

Hello @k3a,

When attempting to inspect the commits of your pull request for CLA signature status among all authors we encountered commit(s) which were not linked to a GitHub account, thus not allowing us to determine their status(es).

The commits that are missing a linked GitHub account are the following:

• a6d8982a548dde0a11c2fd191127d16adcf40740 - This commit has something that looks like an email address ([email protected]). Maybe try linking that to GitHub?.

Unfortunately, we are unable to accept this pull request until this situation is corrected.

Here are your options:

1. If you had an email address set for the commit that simply wasn't linked to your GitHub account you can link that email now and it will retroactively apply to your commits. The simplest way to do this is to click the link to one of the above commits and look for a blue question mark in a blue circle in the top left. Hovering over that bubble will show you what email address you used. Clicking on that button will take you to your email address settings on GitHub. Just add the email address on that page and you're all set. GitHub has more information about this option in their help center.

2. If you didn't use an email address at all, it was an invalid email, or it's one you can't link to your GitHub, you will need to change the authorship information of the commit and your global Git settings so this doesn't happen again going forward. GitHub provides some great instructions on how to change your authorship information in their help center.

   • If you only made a single commit you should be able to run

     git commit --amend --author="Author Name <[email protected]>"
     

     (substituting "Author Name" and "[email protected]" for your actual information) to set the authorship information.
   • If you made more than one commit and the commit with the missing authorship information is not the most recent one you have two options:
     1. You can re-create all commits missing authorship information. This is going to be the easiest solution for developers that aren't extremely confident in their Git and command line skills.
     2. You can use this script that GitHub provides to rewrite history. Please note: this should be used only if you are very confident in your abilities and understand its impacts.
   • Whichever method you choose, I will come by to re-check the pull request once you push the fixes to this branch.

We apologize for this inconvenience, especially since it usually bites new contributors to Home Assistant. We hope you understand the need for us to protect ourselves and the great community we all have built legally. The best thing to come out of this is that you only need to fix this once and it benefits the entire Home Assistant and GitHub community.

Thanks, I look forward to checking this PR again soon! ❤️

[home-assistant]

Hi @k3a

It seems you haven't yet signed a CLA. Please do so here.

Once you do that we will be able to review and accept this pull request.

Thanks!

[k3a]

Thanks for the suggestion! I have updated it to match the way hui-energy-devices-graph-card does it (clicking on a history bar element instead of a label). It is probably batter to have it consistent and I tested that it works fine on mobile too. Tapping opens More info, long tap keeps tooltip only.

It is now implemented in state-history-chart-timeline which should be the best spot.
The commit is much smaller too.

[bramkragten]

We should prevent the action when the graph is the more info itself, as it will give a weird behaviour of opening the more info again.

[k3a]

I have added inMoreInfo (default False) property to state-history-chart-timeline and state-history-charts.
It is quite specific property for "is in more info dialog" which I don't like that much but this is really the only place where this more-info event should not be fired.

I was considering adding clickForMoreInfo (default True) at first. That is more universal and nicer but having it as a property of state-history-charts would kind of imply that it applies for state-history-chart-line too.
But having more-info handler on state-history-chart-line doesn't seem useful to me because More info dialog won't provide more info than that line chart, except maybe the button to access more history.

If you think more-info handler could be useful for the line history graph too, I can rework it into clickForMoreInfo property.

[bramkragten]

Thanks!

[k3a]

Actually please take a look at alternative PR #18036 which supports both chart types. I think it makes more sense unless you plan to have some other clicking function on line history state chart in the future.