mirror of https://github.com/home-assistant/frontend.git synced 2026-04-02 00:27:49 +01:00

Go to file

Tom Carpenter 8f958147dd Add Visual Editors for Energy Dashboard Cards (#29483 )

* Add common API for energy collection keys

These allow so far for:
1. Creating a valid collection key
2. Validating that a collection key is useable
3. Getting a list of all currently active collection keys

Currently the validation/creation is simply checking the prefix. In time this could be extended to add more validation - e.g. sanitising punctuation/spaces/etc.

Cards configured using a visual editor will in the future ican use these APIs to distinguish between collection keys created manually in YAML/internally by HA from those created by the visual editor.

* Create visual editor for energy date selector

Allow creating date selection cards directly from the lovelace card dialog rather than requiring manual creation.

To aid in this, a date selection editor card has been created to allow using the visual editor. This includes options for setting the vertical opening direction, whether comparison is enabled/disabled, and creating a collection key.

To keep things hopefully more accessible to users, the `energy_` prefix for the collection key can be omitted from the text field. It will be added automatically if necessary. The prefix must be added if editing in the YAML editor.

Validation of the collection key is also performed, providing an error message if the key is invalid.

* Allow visual editors only for UI collection keys

Prevent the visual editors from being used if the collection key doesn't have the correct prefix. This is to avoid breaking existing user dashboards that predate the visual editor.

Additionally use the helper in energy dashboard for stripping the UI prefix.

* Create visual editor for sankey cards

Allow creating energy/water/power sankey cards directly from the lovelace card dialog rather than requiring manual creation.

A sankey chart editor card has been created to allow using the visual editor. This includes setting of all common options for sankey cards including layout, groups, and selection of a collection key.

To keep things simple for users, the visual editor displays the collection_key field as a drop-down menu from which all active collection keys may be selected.

* Create visual editor for energy graph cards

Allow creating energy/solar/gas/water usage graph cards directly from the lovelace card dialog rather than requiring manual creation.

A common graph editor card has been created to allow using the visual editor. This provides a basic set of common properties - currently just title and collection key.

To keep things simple for users, the visual editor displays the collection_key field as a drop-down menu from which all active collection keys may be selected.

* Assign visual editor to compare card

This is not assigned to the lovelace card selector as its not strictly a card, but rather an alert. However it might as well be assigned to the visual editor for consistency.

* Add Power Sources Graph

This was missed when adding other graphs. Currently it shares the same editor which means the optional show_legend key cannot yet be set visually. In time this could be updated.

* Update energy card descriptions

Update descriptions and names of cards in the lovelace card selector to be consistent with the energy card documentation.

* Create visual editor for energy device graph cards

Allow creating device and detailed device graph cards directly from the lovelace card dialog rather than requiring manual creation.

* Pass config type to devices schema

Rather than converting to a boolean, pass in the type. This will make expanding easier if future devices cards are added.

* Add missing fields to Energy Graph Card Editor

Add options to set `show_legend` and `link_dashboard` config fields.

* Add energy gauge visual editing

These need no special configuration, so might as well reuse the generic energy graph card editor.

* Add option to ignore onInput for ha-form-string

For the ha-form-string element on e.g. the card editor dialog, it would be useful for some types of input to not send value changed events for incomplete changes.

Currently the form triggers the event whenever a character is typed/deleted by forwarding onInput event. To avoid this where undesireable, add a new optional schema entry to ignore these events, which if defined and true sees updating only in response to the onChange callback.

For the energy date picker, this will avoid unnecessary creation of collection keys and by extension energy API connections when using the visual editor improving efficiency.

* Disable preview of energy cards in card picker
To avoid excess querying of the backend for energy data when loading the card picker dialog.

* Set default energy collection key to dashboard name

This changes the behaviour so that by default any component without a collection key will be grouped with other elements on their dashboard, but not with elements on other dashboards.

* Add stub config for date picker

To auto-populate a default picker configuration, including current dashboard name as the collection key.

* Add Stub Configs for other Energy Cards

Auto-populate the default parameters and the current dashboards default collection key.

* Add isActive Getter to Energy Collection

* Add findEnergyDataCollection

This will look for an existing data collection but will not create a new one if it doesn't exist.

To help with this, move the logic for creating the connection key name into a function shared between the new findEnergyDataCollection and the existing getEnergyDataCollection.

* Convert energyCollectionKeys to a Set

All entries should be unique, so use set behaviour.

* Fix capitalisation in translations

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>

* Revert unintentionally committed change

* Revert "Add option to ignore onInput for ha-form-string"

This reverts commit 1cae35db25.

* Remove hiding of collection key prefix

For now keep things simple and show the whole prefix as creation will probably be overhauled in the future.

To assist the user, in the date picker, automatically add the required prefix when the user types into the collection key box.

* Use panelUrl directly for default collection keys

* Update src/translations/en.json

Fix typo

Co-authored-by: Norbert Rittel <norbert@rittel.de>

* Ensure energy cards appear at end of card picker

Add a new `sortAtEnd` option which will cause cards with this sort parameter to sink to the bottom of the card picker.

* Remove collection key from stubConfig
Empty is fine, will convert to same default key anyway.

* Make all collection keys text fields
Remove the active energy collection dropdown.

* Revert "Ensure energy cards appear at end of card picker"

This reverts commit 28834aaa55.

* Add (hidden) energy cards to card picker

Merge in changes originally proposed in #23499.

* Resolve Merge Conflicts

* Fix Lint Error

* Update energy card descriptions

Make them consistent with other card descriptions which start with "The <name of card> card shows ...".

* Change Energy Card Descriptions
Fix the descriptions to use `This card` not `The ... card`.

* Change hide_compound_stats Description
Change to 'upstream devices' to match energy config page descriptions.

* Remove superfluous translation
The type field was not intended to be added to the label callback.

* Remove unused collection key exports

* Remove createEnergyCollectionKey

Was helpful when tying into the collection_key field to auto-add the prefix, but so be it.

* Add visual editor to water flow sankey
Can use the same sankey editor as the others. Update the description of energy sankey to better describe what is being displayed and to match the description of water vs water flow sankey.

* Add getStubConfig to water flow sankey

* Add missing water-flow-sankey to validation

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>

* Fix Date Picker Collection Key Localise

* Move Collection Key to end of Visual Editor
Downplay its significance - move it to the end of the list of options.

* Fix default collection key check
Intended behaviour was to check that the panel URL was not empty - defaultKey will always be truthy!

* Add Opening Direction to Date Picker Config

* Omit "inline" opening direction

This breaks the visual editor as the date selection window suddenly popus up in the preview and is uncloseable.

* Update src/panels/lovelace/editor/lovelace-cards.ts

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>

* Add visual editor for energy-sources-table

The only energy card now missing a visual editor, create the editor for completeness.

* Add name/description for Energy Compare card

* Add preview mode to energy-compare-card

Otherwise it just appears blank in the card and dashboard editors. In preview it will just use the current date for start/end and not provide the dismiss option just to give an impression of how it will look.

* Add type check in energy-graph-card-editor

* Add documentation link for energy-compare-card

* Add documentation links for energy badges

* Fix value lost in dev merge

* Remove dismiss from compare card preview

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>

---------

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>
Co-authored-by: Norbert Rittel <norbert@rittel.de>
Co-authored-by: karwosts <karwosts@gmail.com>
Co-authored-by: Simon Lamon <32477463+silamon@users.noreply.github.com>