Dashboard "chart" with 7-day future forecasting

[alaorath]

I’ve done the best I can to search, but nothing quite matches what I’m looking for.

I feel like this should be “easy” to accomplish, but my HA visualization skills are comprised of Googling, then copy/pasting.

Using the “Open-Metro Solar Forecast” integration, there is a sensor for each of the upcoming days (up to 7+ days in the future) of the forecasted solar production in kWh.

example:

• Estimated energy production - today
• Estimated energy production - tomorrow
• Estimated energy production - day after tomorrow
• Estimated energy production - 3 days from now
• Estimated energy production - 4 days from now
• Estimated energy production - 5 days from now
• Estimated energy production - 6 days from now
• Estimated energy production - 7 days from now

I would like a simple bar chart that represents all of these “sensors” into one chart, but looking into the future, not the historical data. Basically a 7-day “future” chart starting today and looking at the forecasts (with the x-axis as the days, starting “today” and +1, +2, +3… etc - and the y-axis as the kWh from the integration).

Right now I have a glance card which shows the next 3 days as text, which works, but is ugly:

show_name: true
show_icon: false
show_state: true
type: glance
entities:
  - entity: sensor.energy_production_tomorrow_2
    name: tomorrow
  - entity: sensor.energy_production_d2
    name: day after
  - entity: sensor.energy_production_d3
    name: day after-after

Which renders something like this:

tomorrow          day after        day after-after
26.9 kWh         41.2 kWh           30.3 kWh

[karwosts]

There’s nothing built into HA that will render this.

You may have to go to custom apexcharts card, and look up the data_generator option.

[d921 (dominic)]

How about using a tile card for each sensor?

[justone]

search for “custom:clock-pv-forecast-card”
looks like this

EDIT: the first bar named rest is sort of upside down, means it starts from the right and shows the remaining amount for the actual day … since being after sunset this pic shows nothing

EDIT2: looks as if it’s named “pv-forecast-card” in HACS

[vingerha]

@karwosts

custom apexcharts card, and look up the data_generator

apexcharts with a entity per sensor and offsetting each sensor is sufficient fafaikt…without data_generator

[alaorath]

@justone

custom:clock-pv-forecast-card

This worked exactly what I was imagining! Nice!

heh, except the tool-tips is DE and not English… oh well, close enough!

[justone]

perhaps you ask the author … or modify the js file yourself.

After you installed the card it sits in /config/www/community/pv-forecast-card
And I bet you got a texteditor which alllows for Ctrl-F search with a replace.

The only other alternative which springs to mind is the following.

Home Assistant card (replacing former bar-card config)

Because custom Bar-card has not been maintained for a while, I decided to try and mimic it as much as possible with core HA elements and card_mod, which in my toolset is practically core… I’ve posted about this in the bar-card topic, but since it has become more than a simple replacement, I figured it might be useful and fun for the community to share standalone. It features some nice and a bit more complex card_mods (setting generic mods on entities in an entities card, but overrule that on i…

But it comes along with advantes aswell as disadvantages.
The advantage, it not a card but bunches of card_mod lines, which allows for a maximum flexibility.
The biggest drawback, once you want to modify something forget about everythings done using cardmod and accidently modifiying something using the Card’s GUI Editor, most of the lines which deal with coloring are gone. Means you should definatly have a backup of the card’s YAML once finished. But it’s a clever appoach.

[Mariusthvdb (Marius)]

right, and something like that’s in my dashboard

I would have shortened the templates, or at least c&p them, if not for the attribute on the entity…

Yaml for Sunchance

type: custom:fold-entity-row
head:
  type: section
  label: Zonkans KNMI
  card_mod: !include /config/dashboard/card_mods/label.yaml
# padding: 0
entities:
  - type: custom:hui-element
    card_type: entities
    card_mod:
      style:
        hui-attribute-row:
          $: |
            hui-generic-entity-row {
              padding: 0px 16px;
              margin: 0px -16px;
              border-radius: 24px;
              border: 2px solid rgb(49,150,207);
              border-shadow: 2pt;
              height: 25px;
            }
            ha-attribute-value {
              color: var(--primary-color);
            }
            /*.text-content:not(.info) {
              color: var(--primary-color);
            }*/
        .: |
          ha-card {
            color: black;
            --card-mod-icon-color: gold;
            --mdc-icon-size: 20px;
          }
    entities:
      - type: attribute
        entity: binary_sensor.knmi_zon
        name: Vandaag
        attribute: sun_chance0
        suffix: '%'
        card_mod:
          style: |
            hui-generic-entity-row {
              background:
                {% set kans = state_attr(config.entity,'sun_chance0')|float(0) %}
                {% set rest = 100 - kans %}
                {% if kans >= 75 %} {% set bar = '255,215,0' %}
                {% elif kans >= 50 %} {% set bar = '255,165,0' %}
                {% elif kans >= 25 %} {% set bar = '135,206,235' %}
                {% else %} {% set bar = '128,128,128' %}
                {% endif %}
                /*linear-gradient(to left,ivory {{rest}}%, {{bar}} {{kans}}%);*/
                linear-gradient(to right, rgb({{bar}}) 0%, rgb({{bar}}) {{kans}}%, rgba({{bar}},0.6) {{kans}}%, rgba({{bar}},0.2) 100%);
            }
      - type: attribute
        entity: binary_sensor.knmi_zon
        name: Morgen
        attribute: sun_chance1
        suffix: '%'
        card_mod:
          style: |
            hui-generic-entity-row {
              background:
                {% set kans = state_attr(config.entity,'sun_chance1')|float(0) %}
                {% set rest = 100 - kans %}
                {% if kans >= 75 %} {% set bar = '255,215,0' %}
                {% elif kans >= 50 %} {% set bar = '255,165,0' %}
                {% elif kans >= 25 %} {% set bar = '135,206,235' %}
                {% else %} {% set bar = '128,128,128' %}
                {% endif %}
                /*linear-gradient(to left,ivory {{rest}}%, {{bar}} {{kans}}%);*/
                linear-gradient(to right, rgb({{bar}}) 0%, rgb({{bar}}) {{kans}}%, rgba({{bar}},0.6) {{kans}}%, rgba({{bar}},0.2) 100%);
            }
      - type: attribute
        entity: binary_sensor.knmi_zon
        name: Overmorgen
        attribute: sun_chance2
        suffix: '%'
        card_mod:
          style: |
            hui-generic-entity-row {
              background:
                {% set kans = state_attr(config.entity,'sun_chance2')|float(0) %}
                {% set rest = 100 - kans %}
                {% if kans >= 75 %} {% set bar = '255,215,0' %}
                {% elif kans >= 50 %} {% set bar = '255,165,0' %}
                {% elif kans >= 25 %} {% set bar = '135,206,235' %}
                {% else %} {% set bar = '128,128,128' %}
                {% endif %}
                /*linear-gradient(to left,ivory {{rest}}%, {{bar}} {{kans}}%);*/
                linear-gradient(to right, rgb({{bar}}) 0%, rgb({{bar}}) {{kans}}%, rgba({{bar}},0.6) {{kans}}%, rgba({{bar}},0.2) 100%);
            }

but… wait could it be possible now that I look at it again…
Yes! we can set the

{% set kans = state_attr(config.entity,config.attribute)|float(0) %} using config.attribute.

I never tried the before and it just works

Yaml with config.attribute &anchor

      - type: attribute
        entity: binary_sensor.knmi_zon
        name: Vandaag
        attribute: sun_chance0
        suffix: '%'
        card_mod: &style_bar
          style: |
            hui-generic-entity-row {
              background:
                {% set kans = state_attr(config.entity,config.attribute)|float(0) %}
                {% set rest = 100 - kans %}
                {% if kans >= 75 %} {% set bar = '255,215,0' %}
                {% elif kans >= 50 %} {% set bar = '255,165,0' %}
                {% elif kans >= 25 %} {% set bar = '135,206,235' %}
                {% else %} {% set bar = '128,128,128' %}
                {% endif %}
                /*linear-gradient(to left,ivory {{rest}}%, {{bar}} {{kans}}%);*/
                linear-gradient(to right, rgb({{bar}}) 0%, rgb({{bar}}) {{kans}}%, rgba({{bar}},0.6) {{kans}}%, rgba({{bar}},0.2) 100%);
            }
      - type: attribute
        entity: binary_sensor.knmi_zon
        name: Morgen
        attribute: sun_chance1
        suffix: '%'
        card_mod: *style_bar

      - type: attribute
        entity: binary_sensor.knmi_zon
        name: Overmorgen
        attribute: sun_chance2
        suffix: '%'
        card_mod: *style_bar

[justone]

still not get it … perhaps because I’m unsure about the content of “labels.yaml”.
But I do think that your example helps me along to understand this “anchor” thingy I recently read in the specs but never understood about how to make use of it.
Seems to save dozends of lines of code.

[Mariusthvdb (Marius)]

@justone

dozends of lines of code.

make that ‘duizend’ … (Dutch)

[imtn]

Hi guys,
I am new here and actually a HA beginner.
Can someone explain how to add clock-pv-forecast-card to a dashboard.
I installed it through HACS, but if I am trying to add it to a Dashboard, it is not listed there.
Thank you in advance

[Edwin_D]

I cannot answer that question. I can tell however that, contrary to what is said above, the energy dashboard is able to tell future predictions if you add the required sensors to the energy dashboard configuration:

[Mariusthvdb (Marius)]

@imtn

how to add clock-pv-forecast-card to a dashboard.

which card is that?

[imtn]

i am reffering to this one. As I could see on the top, the discussion was also about this one.

don’t really understand point 3.
How to do this … and select Custom: Clock PV Forecast Card .

[Mariusthvdb (Marius)]

@justone

pv-forecast-card

seems to be this one: GitHub - dropqube/pv-forecast-card: A "Clock Weather Card" inspired solar forecast card for visualizing the forecast

@imtn

How to do this … and select Custom: Clock PV Forecast Card .

if the card was installed correctly, you should be able to find it in the setup of a new card in the UI. Click add card and get this screen. You can then type the card name in that search box

[imtn]

Yeah, this is the one I am talking about.
The problem is that after installation through HACS it is not listed while trying to add as a new Card.
I can see that the files are installed (see screenshot)

[Mariusthvdb (Marius)]

you did reload the resources? as per instructions

click top right menu (the 3 dots, in my case the template ), and select reload resources (Bronnen opnieuw laden)

[imtn]

where can i find this menu? I don’t see it whithin a dashboard

[imtn]

there is no need to discuss about it anymore.
It is reported already as a bug in GitHub. However, thank you for willing to help.