Custom Card, can I nest call/render existing cards inside mine?

Development
1

Hey all,

I was wondering if you can call and render existing (core and community) cards in your custom block. Or in other words from javascript.

I want to create a quick electricity usage overview for 20 groups. (one card per group) And when you press on the value you get a dropdown (or modal) with a detailed graph. Now, I don’t want to code graphs when there are fantastic community cards already.

Is there an existing/known way to (re)use those existing cards inside my custom card?

2

Do you need to write a custom card? What is it doing differently to other cards?

You can use stack-in-card to nest cards in another card.

Then you can use card-mod to turn the border off for the nested cards so they all look like they’re part of one card using the following on each:

ha-card {
  border: none;
}

Then you can use card-templater to change the entity targeted by whatever you’re using to show the graph. So if you were using a “history-graph” for example, you would use entity_template: rather than entity. Therefore if you’re selecting something from a dropdown (using input_select for example), when the dropdown value changes, the graph can change it’s entity.

Is that sort of what you’re after?

3

Well, I’m looking for a row card to hold 2 or 4 sub cards. These cards should only display the value of the sensors. Some custom text colors for the ranges. If you press one value a dropdown div should appear with the long term graph values of this sensor. The dropdown should be row width, so not just under that one sensor card. energy-period-selector-plus gave me the best result, so far. And I could build it that way. But then I would need to “hard-code” it in every view whery I use this. This is why I would wish to create my own (private) custom card.