Stacked temperature graphs with heating information & control #219
MathieuIci
started this conversation in
Show and tell
Replies: 2 comments 4 replies
-
|
Amazing! |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Would you be happy to share the template? This is similar to something I've been doing which also suffers from very long YAMLs that are hard to manage and I'd like to experiment with stacking them as you have done here. |
Beta Was this translation helpful? Give feedback.
4 replies
-
|
Sure, you will likely have to tweak it for your needs. In particular the query selector at the end might need to be modified depending on the type of dashboard used for the graph. Here is the Jinja2 template: type: custom:plotly-graph
raw_plotly_config: true
hours_to_show: 24
entities:
{%- for entity in entities %}
{%- if entity['entity'].startswith('climate') %}
- entity: {{ entity['entity'] }}::hvac_action
yaxis: y{{ loop.index }}
line:
width: 0
fill: tozeroy
fillcolor: '{{ entity['colors']['hvac_action'] }}'
hovertemplate: <extra></extra>
filters:
- fn: |
({xs, ys, meta, states, statistics, hass}) => {
newxs = [];
newys = [];
states.forEach((state, index) => {
if (index > 0 && state.attributes.hvac_action != null) {
if (state.attributes.hvac_action != states[index-1].attributes.hvac_action) {
newxs.push(xs[index]);
newys.push(state.attributes.hvac_action != 'heating' ? state.attributes.current_temperature : 0);
}
}
newxs.push(xs[index]);
newys.push(state.attributes.hvac_action == 'heating' ? state.attributes.current_temperature : 0);
});
return {
xs: newxs,
ys: newys
}
}
x: $fn ({xs}) => xs
'y': $fn ({ys}) => ys
{%- endif %}
{%- if entity['entity'].startswith('climate') %}
- entity: {{ entity['entity'] }}::temperature
yaxis: y{{ loop.index }}
line:
color: '{{ entity['colors']['temperature'] }}'
shape: hv
hovertemplate: '<span style="text-align: center; font-size: 20px;">%{y}</span><br>%{x}<extra></extra>'
x: $fn ({xs}) => xs
'y': $fn ({ys}) => ys
fnmin: $fn ({ ys, vars }) => {vars.miny{{ loop.index }} = Math.min(...ys.filter(Number))}
fnmax: $fn ({ ys, vars }) => {vars.maxy{{ loop.index }} = Math.max(...ys.filter(Number))}
{%- endif %}
- entity: {{ entity['entity'] }}{% if entity['entity'].startswith('climate') %}::current_temperature{% endif %}
yaxis: y{{ loop.index }}
line:
color: '{{ entity['colors']['current_temperature'] }}'
hovertemplate: '<span style="text-align: center; font-size: 20px;">%{y}</span><br>%{x}<extra></extra>'
x: $fn ({xs}) => xs
'y': $fn ({ys}) => ys
fnmin: >-
$fn ({ ys, vars }) => {vars.miny{{ loop.index }} = Math.min(...ys.filter(Number){% if entity['entity'].startswith('climate') %}, vars.miny{{ loop.index }}{% endif %})}
fnmax: >-
$fn ({ ys, vars }) => {vars.maxy{{ loop.index }} = Math.max(...ys.filter(Number){% if entity['entity'].startswith('climate') %}, vars.maxy{{ loop.index }}{% endif %})}
{%- endfor %}
defaults:
entity:
mode: lines
line:
width: 2
showlegend: false
layout:
dragmode: pan
height: {{ entities|length * 140 }}
margin:
t: 40
r: 70
b: 50
l: 60
font:
family: Roboto,Noto,sans-serif
color: $fn ({css_vars}) => css_vars['primary-text-color']
title:
text: {{ title }}
xref: paper
yref: paper
x: 0
'y': 1
xanchor: left
yanchor: bottom
pad:
b: 20
l: -44
font:
size: 24
grid:
rows: {{ entities|length }}
columns: 1
roworder: top to bottom
shared_xaxes: true
xaxis:
showgrid: false
tickformat: '%H:%M<br>%e %b'
hoverformat: '%H:%M:%S<br>%e %b'
{%- for entity in entities %}
yaxis{% if loop.index > 1 %}{{ loop.index }}{% endif %}:
title:
text: {{ entity['name'] }}
font:
size: 18
color: '{{ entity['colors']['current_temperature'] }}'
standoff: 0
autorange: false
fixedrange: true
range:
- $fn ({vars}) => vars.miny{{ loop.index }}{% if entity['entity'].startswith('climate') %} - 0.5{% endif %}
- $fn ({vars}) => vars.maxy{{ loop.index }}{% if entity['entity'].startswith('climate') %} + 0.5{% endif %}
ticksuffix: °
griddash: dot
{%- endfor %}
annotations:
{%- for entity in entities %}
- text: |-
$fn ({hass}) =>
{%- if entity['entity'].startswith('climate') %}
"<span style='font-size: 22px;'><span style='font-weight: bold; color: {{ entity['colors']['current_temperature'] }}'>"
+ hass.states['{{ entity['entity'] }}'].attributes['current_temperature'] + "</span>°</span><br><span style='font-size: 20px'><sup></sup></span>"
+ "<span style='font-size: 14px; color: {{ entity['colors']['temperature'] }}'>("
+ hass.states['{{ entity['entity'] }}'].attributes['temperature'] + "°)</span>"
+ (hass.states['{{ entity['entity'] }}'].attributes['hvac_action'] == 'heating' ? "<br><br><br><span style='font-size: 26px'>🔥</span>" : '')
{%- else %}
"<span style='font-size: 22px;'><span style='font-weight: bold; color: {{ entity['colors']['current_temperature'] }}'>"
+ hass.states['{{ entity['entity'] }}'].state + "</span>°</span><br>"
{%- endif %}
xref: x domain
yref: y{{ loop.index }} domain
xanchor: center
yanchor: top
x: 1.1
'y': 0.9
showarrow: false
{%- endfor %}
config:
scrollZoom: true
displaylogo: false
modeBarButtonsToRemove:
- resetScale2d
- autoScale2d
- toImage
- zoom
- lasso2d
- pan2d
- select2d
create_event_handlers: |-
$fn ({getFromConfig}) => {
const graphs = {};
getFromConfig('entities').map(entity => {
graphs[entity['entity']] = {
graphElement: ('xaxis' in entity ? entity['xaxis'].replace(/^x1$/, 'x') : 'x') + ('yaxis' in entity ? entity['yaxis'].replace(/^y1$/, 'y') : 'y')
};
});
const plotlyElement = document
.querySelector("home-assistant").shadowRoot
.querySelector("home-assistant-main").shadowRoot
.querySelector("ha-panel-lovelace").shadowRoot
.querySelector("hui-root").shadowRoot
.querySelector("hui-masonry-view").shadowRoot
.querySelector("plotly-graph").shadowRoot;
Object.entries(graphs).forEach(([entity, config]) => {
plotlyElement.querySelector(`svg.main-svg g.${config.graphElement} :first-child`).onclick = function (e) {
const event = new Event("hass-more-info");
event.detail = { entityId: entity };
document.querySelector("home-assistant").dispatchEvent(event);
};
});
}It will consume a YAML variables file such as this: title: Températures 🌡️
entities:
- entity: climate.rez_de_chaussee_chauffage_thermostat
name: Rez-de-chaussée
colors:
hvac_action: '#f9902977'
current_temperature: '#f99029'
temperature: '#45a7dd66'
- entity: climate.mezzanine_chauffage_thermostat
name: Mezzanine
colors:
hvac_action: '#dddd2277'
current_temperature: '#dddd22'
temperature: '#2bd42d99'
- entity: climate.bureau_chauffage_thermostat
name: Bureau
colors:
hvac_action: '#bd54da77'
current_temperature: '#bd54da'
temperature: '#5f54da99'
- entity: sensor.meteo_douche_temperature
name: Douche
colors:
current_temperature: '#329af6'
- entity: sensor.meteo_dehors_temperature
name: Dehors
colors:
current_temperature: '#00ab00' |
Beta Was this translation helpful? Give feedback.
-
|
We need a power user hall of fame for @MathieuIci 🚀 |
Beta Was this translation helpful? Give feedback.
-
|
@dbuezas lol ! I wrote a very simple Python script that will read both files (Jinja template + YAML data) and produce the YAML to be used in Home Assistant. Here it is: #####################################################################################
# Render a YAML file by using a Jinja2 template file and a YAML data file.
#
# USAGE: python create-yaml-from-jinja.py [-h] [-t TEMPLATE] [-d DATA] [> OUTPUT.yaml]
#####################################################################################
import yaml
import jinja2
import argparse
def main():
# Parse the command line arguments.
parser = argparse.ArgumentParser(description='Render a YAML file by using a Jinja2 template file and a YAML data file.')
parser.add_argument('-t', '--template', type=argparse.FileType('r'), help='The Jinja2 template file')
parser.add_argument('-d', '--data', type=argparse.FileType('r'), help='The YAML data file')
args = parser.parse_args()
# Read the content of the files.
data_file = args.data.read()
template_file = args.template.read()
# Load the YAML data.
data = yaml.load(data_file, Loader=yaml.SafeLoader)
# Load the template object.
template = jinja2.Template(template_file)
# Render the template using the data and print it to STDOUT.
print(template.render(data))
return
if __name__ == "__main__":
main() |
Beta Was this translation helpful? Give feedback.
-
|
Ohh, I see. I thought this was all within Home Assistant. |
Beta Was this translation helpful? Give feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
Using the new universal functions feature of the 3.0.0 release, I created stacked temperature graphs with heating information & the ability to display the "more-info" screen for each graph.
It does the following:
Here is the YAML for 2 sensors (one climate entity and one sensor)
The YAML for 5 entities is almost 400 lines long 😲. That is hard to manage when testing and making tweaks, so for this reason I created a Jinja2 template that reads a variables YAML and produces the card YAML used in Home Assistant.
Here is the variables YAML for my 5 entities:
This is all I need to write to have the Jinja2 template produce the required card YAML for Home Assistant 🙂
Here is a video of the card in action, showing adjusting the temperature set point and current heating status:
Stacked.temperature.graphs.with.heating.information.control.webm
Beta Was this translation helpful? Give feedback.
All reactions