Attempts to customize the "statistic" card

Many people here have already mentioned the lack of options for customizing the “statistics” card to suit their needs. I feel the same way right now.

I am currently trying to create a dashboard display for the Shelly 1 PM Mini G3 (I have several of them in use).

First, the current consumption should be displayed in an analog card - that’s no problem. Below that, the monthly consumption should be shown and next to it a WIFI icon that is a link to the UI of the device (trivial).

But how to put this together?

Attempt 1:

With a lot of effort, I managed to use CSS to change the display of the card so that it only shows the value and is nice and small. But that’s just the display! The map itself (behind the view frame) has a minimum size of 2x6 and I can’t get it any smaller - annoying.

Attempt 2:

Bildschirmfoto 2025-01-16 um 23.45.59

With Grid I tried to pack the three cards together, but that fails mainly because I have no idea how to smuggle in a statistic card - and secondly you can’t get rid of the ugly frames of the individual cards.

Attempt 3:

The last idea was to let ChatGPT change the original description of the card (.ts - see Github) so that it only shows what I want to see, delete the minimal size and set the appropriate size (you see the minimum size statements in the .ts file!). Then compile a .js from it and use it as my_custom_card in the system.

Problem: I can generate the card, create the file in HA and include it as a resource in the system. It is there and it is where it should be (i can access it in the browser) … but it cannot be found from HA - neither via terminal commands nor by creating a card on the dashboard. It is there - but then somehow not really …

HA is a really bad girl!!!

Translated with the help of DeepL.com (free version)