-
Notifications
You must be signed in to change notification settings - Fork 27
Displaying prices in Apexchart card
It is required to have the custom apexchart card installed before this will work! Follow the instructions here: https://github.com/RomRider/apexcharts-card
Edit your dashboard and select Add Card
.
Scroll to the bottom and select Manual
Replace the code in the window with this:
type: custom:apexcharts-card
apex_config:
chart:
height: 350px
experimental:
color_threshold: true
graph_span: 24h
header:
title: Elpriser pr. time (kr/kWh)
show: true
span:
start: hour
offset: '-2h'
now:
show: true
label: Nu
yaxis:
- min: 0
apex_config:
tickAmount: 5
series:
- entity: sensor.energi_data_service
type: column
data_generator: |
var today = entity.attributes.raw_today.map((start, index) => {
return [new Date(start["hour"]).getTime(), entity.attributes.raw_today[index]["price"]];
});
if (entity.attributes.tomorrow_valid) {
var tomorrow = entity.attributes.raw_tomorrow.map((start, index) => {
return [new Date(start["hour"]).getTime(), entity.attributes.raw_tomorrow[index]["price"]];
});
var data = today.concat(tomorrow);
} else {
var data = today
}
return data;
float_precision: 2
color_threshold:
- value: 0
color: green
- value: 2
color: orange
- value: 3.5
color: red
- value: 5
color: darkred
This option requires config-template-card to be installed along side Apex chart.
Create these sensors (remember to rename the entity_id
property to match your Energidata Service sensor name):
sensor:
- platform: statistics
name: Average energy price last 30d mean
entity_id: sensor.energi_data_service
state_characteristic: mean
sampling_size: 760
max_age:
days: 30
- platform: statistics
name: Energy price last 30d (std)
entity_id: sensor.energi_data_service
state_characteristic: standard_deviation
sampling_size: 512
max_age:
days: 30
template:
- sensor:
- name: Historic Energy Price Percentiles
unique_id: historic_energy_price_percentiles
state: OK
attributes:
25th: "{{ states('sensor.average_energy_price_last_30d_mean') | float(0) + states('sensor.energy_price_last_30d_std') | float(0) * -0.63 }}"
50th: "{{ states('sensor.average_energy_price_last_30d_mean') | float(0) + states('sensor.energy_price_last_30d_std') | float(0) * 0 }}"
75th: "{{ states('sensor.average_energy_price_last_30d_mean') | float(0) + states('sensor.energy_price_last_30d_std') | float(0) * 0.57 }}"
90th: "{{ states('sensor.average_energy_price_last_30d_mean') | float(0) + states('sensor.energy_price_last_30d_std') | float(0) * 1.29 }}"
95th: "{{ states('sensor.average_energy_price_last_30d_mean') | float(0) + states('sensor.energy_price_last_30d_std') | float(0) * 1.65 }}"
99th: "{{ states('sensor.average_energy_price_last_30d_mean') | float(0) + states('sensor.energy_price_last_30d_std') | float(0) * 2.33 }}"
100th: "{{ states('sensor.average_energy_price_last_30d_mean') | float(0) + states('sensor.energy_price_last_30d_std') | float(0) * 3.9 }}"
Edit your dashboard and select Add Card
.
Scroll to the bottom and select Manual
Replace the code in the window with this:
type: custom:config-template-card
entities:
- sensor.energi_data_service
- sensor.historic_energy_price_percentiles
config_templates: default
variables:
max_price_threshold: |
() => {
return states['sensor.historic_energy_price_percentiles'].attributes['99th']
}
get_yellow_threshold: |
() => {
return states['sensor.historic_energy_price_percentiles'].attributes['25th']
}
get_orange_threshold: |
() => {
return states['sensor.historic_energy_price_percentiles'].attributes['75th']
}
get_darkred_threshold: |
() => {
return states['sensor.historic_energy_price_percentiles'].attributes['95th']
}
card:
type: custom:apexcharts-card
graph_span: 47h
span:
end: day
offset: +23h
apex_config:
chart:
height: 200px
grid:
show: true
borderColor: rgb(158, 158, 158)
strokeDashArray: 2
annotations:
position: back
yaxis:
- 'y': 0
y2: ${ get_yellow_threshold() }
fillColor: rgb(76, 175, 80)
strokeDashArray: 0
borderColor: '#00000000'
- 'y': ${ get_yellow_threshold() }
y2: ${ get_orange_threshold() }
fillColor: rgb(255, 193, 7)
strokeDashArray: 0
borderColor: '#00000000'
- 'y': ${ get_orange_threshold() }
y2: ${ get_darkred_threshold() }
fillColor: rgb(255, 152, 0)
strokeDashArray: 0
borderColor: '#00000000'
- 'y': ${ get_darkred_threshold() }
y2: ${ max_price_threshold() }
fillColor: rgb(244, 67, 54)
strokeDashArray: 0
borderColor: '#00000000'
- 'y': ${ max_price_threshold() }
y2: 100
fillColor: rgb(255, 0, 0)
strokeDashArray: 0
borderColor: '#00000000'
header:
show: true
title: Elpriser pr. time (DKK/kWh)
show_states: true
colorize_states: true
now:
label: Nu
show: true
color: black
yaxis:
- min: '|-0.5|'
max: '|+0.5|'
apex_config:
tickAmount: 4
forceNiceScale: false
decimalsInFloat: 1
series:
- name: Nu
entity: sensor.energi_data_service
color: rgb(33, 150, 243)
float_precision: 2
data_generator: |
return [[new Date(), entity.state]]
show:
in_chart: false
- name: Current
entity: sensor.energi_data_service
stroke_width: 3
float_precision: 2
type: line
color: rgb(33, 150, 243)
extend_to: false
show:
in_header: false
data_generator: |
var today = entity.attributes.raw_today.map((start, index) => {
return [new Date(start["hour"]).getTime(), entity.attributes.raw_today[index]["price"]];
});
if (entity.attributes.tomorrow_valid) {
var tomorrow = entity.attributes.raw_tomorrow.map((start, index) => {
return [new Date(start["hour"]).getTime(), entity.attributes.raw_tomorrow[index]["price"]];
});
var data = today.concat(tomorrow);
} else {
var data = today
}
return data;
This option requires config-template-card to be installed along side Apex chart.
Create these sensors (remember to rename the entity_id
property to match your Energidata Service sensor name):
sensor:
- platform: statistics
name: Average energy price last 30d mean
entity_id: sensor.energi_data_service
state_characteristic: mean
sampling_size: 760
max_age:
days: 30
- platform: statistics
name: Energy price last 30d (std)
entity_id: sensor.energi_data_service
state_characteristic: standard_deviation
sampling_size: 512
max_age:
days: 30
- platform: statistics
name: Energy price last 30d (mean)
entity_id: sensor.energi_data_service
state_characteristic: mean
sampling_size: 512
max_age:
days: 30
template:
- sensor:
- name: Historic Energy Price Percentiles
unique_id: historic_energy_price_percentiles
state: OK
attributes:
25th: "{{ states('sensor.average_energy_price_last_30d_mean') | float(0) + states('sensor.energy_price_last_30d_std') | float(0) * -0.63 }}"
50th: "{{ states('sensor.average_energy_price_last_30d_mean') | float(0) + states('sensor.energy_price_last_30d_std') | float(0) * 0 }}"
75th: "{{ states('sensor.average_energy_price_last_30d_mean') | float(0) + states('sensor.energy_price_last_30d_std') | float(0) * 0.57 }}"
90th: "{{ states('sensor.average_energy_price_last_30d_mean') | float(0) + states('sensor.energy_price_last_30d_std') | float(0) * 1.29 }}"
95th: "{{ states('sensor.average_energy_price_last_30d_mean') | float(0) + states('sensor.energy_price_last_30d_std') | float(0) * 1.65 }}"
99th: "{{ states('sensor.average_energy_price_last_30d_mean') | float(0) + states('sensor.energy_price_last_30d_std') | float(0) * 2.33 }}"
100th: "{{ states('sensor.average_energy_price_last_30d_mean') | float(0) + states('sensor.energy_price_last_30d_std') | float(0) * 3.9 }}"
Edit your dashboard and select Add Card
.
Scroll to the bottom and select Manual
Replace the code in the window with this:
type: custom:config-template-card
entities:
- sensor.energi_data_service
- sensor.historic_energy_price_percentiles
config_templates: default
variables:
max_price_threshold: |
() => {
return states['sensor.historic_energy_price_percentiles'].attributes['99th']
}
get_yellow_threshold: |
() => {
return states['sensor.historic_energy_price_percentiles'].attributes['25th']
}
get_orange_threshold: |
() => {
return states['sensor.historic_energy_price_percentiles'].attributes['75th']
}
get_darkred_threshold: |
() => {
return states['sensor.historic_energy_price_percentiles'].attributes['95th']
}
card:
type: custom:apexcharts-card
graph_span: 132h
span:
end: day
offset: +108h
apex_config:
chart:
height: 200px
grid:
show: true
borderColor: rgb(158, 158, 158)
strokeDashArray: 2
annotations:
position: back
yaxis:
- 'y': 0
y2: ${ get_yellow_threshold() }
fillColor: rgb(76, 175, 80)
strokeDashArray: 0
borderColor: '#00000000'
- 'y': ${ get_yellow_threshold() }
y2: ${ get_orange_threshold() }
fillColor: rgb(255, 193, 7)
strokeDashArray: 0
borderColor: '#00000000'
- 'y': ${ get_orange_threshold() }
y2: ${ get_darkred_threshold() }
fillColor: rgb(255, 152, 0)
strokeDashArray: 0
borderColor: '#00000000'
- 'y': ${ get_darkred_threshold() }
y2: ${ max_price_threshold() }
fillColor: rgb(244, 67, 54)
strokeDashArray: 0
borderColor: '#00000000'
- 'y': ${ max_price_threshold() }
y2: 100
fillColor: rgb(255, 0, 0)
strokeDashArray: 0
borderColor: '#00000000'
header:
show: true
title: Elpriser pr. time (DKK/kWh)
show_states: true
colorize_states: true
now:
label: Nu
show: true
color: black
yaxis:
- min: '|-0.5|'
max: '|+0.5|'
apex_config:
tickAmount: 4
forceNiceScale: false
decimalsInFloat: 1
series:
- name: Nu
entity: sensor.energi_data_service
color: rgb(33, 150, 243)
float_precision: 2
data_generator: |
return [[new Date(), entity.state]]
show:
in_chart: false
- name: Current
entity: sensor.energi_data_service
stroke_width: 3
float_precision: 2
type: line
color: rgb(33, 150, 243)
extend_to: false
show:
in_header: false
data_generator: |
var today = entity.attributes.raw_today.map((start, index) => {
return [new Date(start["hour"]).getTime(), entity.attributes.raw_today[index]["price"]];
});
var extradata = entity.attributes.forecast.map((start, index) => {
return [new Date(start["hour"]).getTime(), entity.attributes.forecast[index]["price"]];
});
if (entity.attributes.tomorrow_valid) {
var tomorrow = entity.attributes.raw_tomorrow.map((start, index) => {
return [new Date(start["hour"]).getTime(), entity.attributes.raw_tomorrow[index]["price"]];
});
today = today.concat(tomorrow)
}
return today.concat(extradata)