Creating custom solar edge powerflow component

So I saw this nice image with the powerflow and wanted to recreate it.
However I am not sure how to do this, I think it is standard in the solar edge integration?

It is from this topic: SolarEdge solar panels support

I don’t have a direct way to measure my power consumption but I can calculate it using DSMR, which I retrieve from my rpi using api calls to p1monitor.

p1monitor measures everything at the electricity meter of my home.

I know my net power consumption from p1monitor api call. [0, 4kw]
returned solar power from p1monitor api call. [0, 4kw]
So my total power consumption = net power consumption + solar power production (solar power production is known from solar edge integration)
and requested power from the grid is if net power consumption > 0 then requested power = net power consumption
and returned power to grid is if net power consumption = 0 then return power = returned solar power

Does anyone know how I can achieve those images, all the math is doable but I am not sure how I can draw those arrows and get those nice images into a nice lovelace card.

What about this?

It looks nice and saved me quite some work.
Thank you for the suggestion!