Here are some screen shots. They only show the top portion of the screen for brevity, however they show what’s seen after the content has been scrolled upwards. This is equivalent to moving the scroll bar on a browser downwards.
The first two examples are of the HA History panel. When it has been selected and scrolled, you’ll see this at the top of the screen. The top banner is fixed (doesn’t scroll); it contains two icons. On the right is a refresh icon.
On the left is the stacked bars. Tapping it toggles the HA menu panel, exposing it:
For comparison, this is what’s seen when the History Explorer content is scrolled upwards.
Ah yeah, I see what you mean now. That’s the same on Android. It would definitely be useful to keep the header in place.
I’ll have to see how to do that. It seems to be managed by a number of HA specific tags and these are (as usual) not documented anywhere obvious. Reverse engineering time
The update and burger menu are from HA view around the cards. And this one here is just another card. If I scroll up with history explorer card, I have still the HA header and the burger menu. What is your setup, that you don’t have it?
And the update icon is special in the header of the History page, nothing a card on a view can set.
It only happens when you set it as a sidebar panel, not as a card. HA will auto-add the header and the burger menu for cards on dashboards, even full panel mode ones, but it won’t do this for custom sidebar panels.
I just created a YAML file with the appropriate info for a side panel and dropped it in the /config/packages directory.
I’m thinking it might work if it’s somehow added to a new dashboard using the GUI editor. I’ve tried this, but I don’t know where the configuration information is saved for the graphs when using the entity selector. Apparently, the GUI editor won’t recognize the YAML in the raw configuration editor…or, I’m doing something wrong.
Apparently, the dashboard configuration information is in the /config/.storage directory, and it’s saved in JSON format — something I expect you already know.
If you add the card as an actual card (rather than a sidebar panel), over the GUI editor or directly using lovelace YAML, then you won’t have the header issue. The problem only manifests itself on sidebar panels, using the panel_custom integration in configuration.yaml.
It’s stored locally, client-side, in your browser / companion app. It’s not stored on the server running HA.
The YAML for sidebar panel mode is entirely different from the YAML in normal card mode. See these examples from the readme for predefined entities in card mode.
Where is the benefit from such sidebar panel mode… Instead of building a standard lovelace view with the charts and link to this view via a sidebar link?
To be honest, there isn’t really any. It was mainly a user request, I thought it would be a good idea and I completely forgot that you could simply link a dashboard to the sidebar. I guess the only advantage is if you don’t want to use multiple dashboards for some reason.
Thinking of it, I should probably revert this update and direct people to linking a dashboard in panel mode to the sidebar instead. Looking at the discussion with @pocket, the weird YAML creates a lot of confusion already.
Glad it works for you. YAML mode will always be available on this card. It’s just that there is a better way to put it on the sidebar, while keeping it a card, as outlined by @arganto. You are still able to use YAML to define entities.
As I understand it, a card will restrict the width when using a desktop browser. If so, I’ll keep the configuration I’m presently using. It’s plenty more than good enough.
However you can safely continue using the actual panel mode if you prefer. I did remove it from the readme and replaced it by a more elegant sidebar approach, but the technical backend to make the old style panel mode work will continue to be supported by the card in the future.
Apologies to those who already know these details, but here are a few notes for the rest:
When I removed the existing YAML and restarted HA, I attempted to add the component and its resource using the UI. Unfortunately, I couldn’t find any information regarding how to populate the URL to point to the resource file. I eventually figured out the resource needed to be in the configuration.yaml file because I was using YAML mode elsewhere.
My current configuration still uses some header information. I have a couple of configuration items above the graph information:
defaultTimeRange: 2d
decimation: true
The remainder of the original YAML now lives in the panel’s visual editor. As it’s YAML, it’s pretty sensitive to formatting. To make matters worse, the font used in the visual editor is not monospaced. I had to adjust the indentation of the graph section to make the panel function properly. Thanks to Studio Code, it didn’t take more than a few key strokes to get it working.
With the header on the banner, the hard-coded one in the JS file is superfluous, but that’s a pretty minor nit.
Thank you. Obviously, I need to spend more time reading the notes. There’s also plenty more I’ll be doing with additional entities and ‘interior decorating.’
V1.0.20 is now out. It adds support for the database performance optimizations in Home Assistant 2022.4, you can now use your mouse wheel to zoom in and out of the history (while holding the Ctrl key and having the pointer over a graph) and state color boxes can now be selectively hidden in tooltips (so that @arganto gets a few more pixels in his popups ).
If you are using the newest HA version (2022.4 as of this post), I highly recommend updating the card to V1.0.20 or above. HA 2022.4 introduced new optimizations to the database structure that will make it load faster. If you are not (yet) on 2022.4 you can still update the History Explorer card for the other new features, the database changes in this card are backwards compatible. You just won’t get the performance improvements on older HA versions.
Is there a trick to zoom centered from the mouse cursor and not centered in the chart? If not, would be great but if technically not possible or a lot of effort, o.k. But if yes, I only wanted to be sure, that I don’t miss the trick.
).
