Skip to content

Instantly share code, notes, and snippets.

@dbuezas

dbuezas/Dashboard yaml example.yaml Secret

Created January 27, 2023 21:12
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dbuezas/92210c8fcaf8d86d6c2d358e9d83b52d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dbuezas/92210c8fcaf8d86d6c2d358e9d83b52d to your computer and use it in GitHub Desktop.
Download ZIP
Plotly Graph Card - v3.0.0 Beta preview
Raw
Dashboard yaml example.yaml
- theme: Backend-selected
title: $fn
path: fn
badges: []
cards:
- type: custom:plotly-graph-dev
entities:
- entity: sensor.garden_temperature
offset: $fn () => "0d"
fn: |
$fn({ys,vars}) => {
vars.title = ys.slice(-1)[0]
}
show_value: true
- entity: sensor.keller_humidity
filters:
- sliding_window_moving_average:
extended: true
window_size: 20
title: |
$fn({ vars }) => `Value in Title: ${vars.title}`
hours_to_show: 2
- type: custom:plotly-graph-dev
title: 2D Histogram - Last 10 days
entities:
- entity: sensor.openweathermap_pressure
period: hour
internal: true
fn: $fn ({ xs, ys, vars }) => { vars.pressure = ys; vars.xs = xs; }
- entity: sensor.openweathermap_temperature
period: hour
internal: true
fn: $fn ({ ys, vars }) => vars.temperature = ys
- entity: sensor.openweathermap_humidity
period: hour
internal: true
fn: $fn ({ ys, vars }) => vars.humidity = ys
- entity: ''
x: $fn ({ vars }) => vars.temperature
'y': $fn ({ vars }) => vars.pressure
y2: $fn ({ vars }) => vars.humidity
type: histogram2dcontour
mode: lines+markers
line:
color: null
hours_to_show: 240
raw_plotly_config: true
ha_theme: true
layout:
margin:
t: 10
l: 70
r: 0
b: 70
height: 500
zaxis:
title:
text: Humidity
yaxis:
title:
text: Pressure
xaxis:
title:
text: Temperature
autorange: true
- type: custom:plotly-graph-dev
entities:
- entity: sensor.openweathermap_temperature
x: $fn ({ys,vars}) => ys
type: histogram
title: Temperature Histogram last 10 days
hours_to_show: 240
ha_theme: true
raw_plotly_config: true
layout:
margin:
t: 20
l: 50
b: 40
height: 285
xaxis:
autorange: true
- type: custom:plotly-graph-dev
entities:
- entity: sensor.openweathermap_pressure
internal: true
filters:
- resample: 1h
fn: $fn ({ xs, ys, vars }) => { vars.pressure = ys; vars.xs = xs; }
- entity: sensor.openweathermap_temperature
internal: true
filters:
- resample: 1h
fn: $fn ({ ys, vars }) => vars.temperature = ys
- entity: sensor.openweathermap_humidity
internal: true
filters:
- resample: 1h
fn: $fn ({ ys, vars }) => vars.humidity = ys
- entity: ''
x: $fn ({ vars }) => vars.temperature
'y': $fn ({ vars }) => vars.pressure
z: $fn ({ vars }) => vars.humidity
type: scatter3d
mode: lines+markers
marker:
size: 7
line:
color: rgba(50, 50, 217, 0.5)
width: 3
opacity: 0.8
hours_to_show: 240
raw_plotly_config: true
layout:
margin:
t: 0
l: 0
r: 0
b: 0
height: 500
scene:
annotations:
- x: $fn ({ vars }) => vars.temperature[0]
'y': $fn ({ vars }) => vars.pressure[0]
z: $fn ({ vars }) => vars.humidity[0]
text: start
showarrow: tru
arrowhead: 1
xaxis:
title: Temperature
yaxis:
title: Pressure
zaxis:
title: Humidity
- type: custom:plotly-graph-dev
title: 2D Histogram - Last 10 days
entities:
- entity: sensor.openweathermap_temperature
period: hour
internal: true
fn: $fn ({ ys, vars }) => vars.temperature = ys
- entity: sensor.openweathermap_humidity
period: hour
internal: true
fn: $fn ({ ys, vars }) => vars.humidity = ys
- entity: ''
x: $fn ({ vars }) => vars.temperature
'y': $fn ({ vars }) => vars.humidity
mode: markers
name: points
marker:
color: rgb(102,0,0)
size: 2
opacity: 0.4
type: scatter
- entity: ''
x: $fn ({ vars }) => vars.temperature
'y': $fn ({ vars }) => vars.humidity
name: density
ncontours: 20
colorscale: Hot
reversescale: true
showscale: false
line:
color: null
type: histogram2dcontour
- entity: ''
x: $fn ({ vars }) => vars.temperature
'y': undefined
name: x density
marker:
color: rgb(219,91,40)
yaxis: y2
opacity: 1
type: histogram
- entity: ''
x: undefined
'y': $fn ({ vars }) => vars.humidity
name: y density
marker:
color: rgb(219,91,40)
xaxis: x2
type: histogram
hours_to_show: 240
raw_plotly_config: true
layout:
margin:
t: 10
l: 70
r: 0
b: 70
height: 400
bargap: 0.1
showlegend: false
xaxis:
title:
text: Temperature
autorange: true
domain:
- 0
- 0.85
showgrid: false
zeroline: false
yaxis:
title:
text: Humidity
domain:
- 0
- 0.85
showgrid: false
zeroline: false
xaxis2:
domain:
- 0.85
- 1
showgrid: false
zeroline: false
yaxis2:
domain:
- 0.85
- 1
showgrid: false
zeroline: false
- type: custom:plotly-graph-dev
entities:
- entity: sensor.openweathermap_temperature
period: hour
fn: >-
$fn ({ys, vars}) => {vars.is = ys[ys.length-1];vars.was =
ys[ys.length-2];}
- entity: ''
type: indicator
mode: number+delta
docs: >-
https://plotly.com/javascript/reference/indicator/#indicator-number
value: $fn ({ vars }) => vars.is
bgcolor: black
title:
text: Temperature
number:
suffix: °
valueformat: '0.1'
delta:
position: top
suffix: /h
reference: $fn ({ vars }) => vars.was
valueformat: '0.1'
domain:
x:
- 0
- 0.3
'y':
- 0.5
- 1
hours_to_show: 24
layout:
margin:
t: 30
- type: custom:plotly-graph-dev
entities:
- entity: sensor.openweathermap_temperature
period: day
internal: true
fn: $fn ({ ys, vars }) => vars.temperature = ys
- entity: sensor.energy_heating_oil
filters:
- resample: 1d
- derivate: d
internal: true
fn: $fn ({ ys, vars }) => vars.oil = ys
- entity: ''
x: $fn ({ vars }) => vars.temperature
'y': $fn ({ vars }) => vars.oil
mode: markers
name: points
marker:
color: rgb(102,0,0)
size: 2
opacity: 0.4
type: scatter
- entity: ''
x: $fn ({ vars }) => vars.temperature
'y': $fn ({ vars }) => vars.oil
name: density
ncontours: 20
colorscale: YlGnBu
nbinsx: 20
nbinsy: 20
reversescale: true
showscale: false
line:
color: null
type: histogram2dcontour
- entity: ''
x: $fn ({ vars }) => vars.temperature
name: x density
marker:
color: "rgb(40\t57\t143\t)"
yaxis: y2
opacity: 1
type: histogram
- entity: ''
x: undefined
'y': $fn ({ vars }) => vars.oil
name: y density
marker:
color: "rgb(40\t57\t143\t)"
xaxis: x2
type: histogram
hours_to_show: 4800
title: >-
$fn({getFromConfig})=>`Heating - Last
${getFromConfig('hours_to_show')/24} days`
raw_plotly_config: true
layout:
margin:
t: 10
l: 70
r: 0
b: 70
height: 400
bargap: 0.1
showlegend: false
xaxis:
title:
text: Outside Temperature (°C)
autorange: true
domain:
- 0
- 0.85
showgrid: false
zeroline: false
yaxis:
title:
text: Oil burned (kWh per day)
domain:
- 0
- 0.85
showgrid: false
zeroline: false
xaxis2:
domain:
- 0.85
- 1
showgrid: false
zeroline: false
yaxis2:
domain:
- 0.85
- 1
showgrid: false
zeroline: false
- type: custom:plotly-graph-dev
entities:
- entity: sensor.openweathermap_temperature
period: day
statistic: max
x: $fn ({ ys,vars }) => ys
type: histogram
name: max
opacity: 0.8
marker:
color: rgb(206,43,30)
- entity: sensor.openweathermap_temperature
period: day
statistic: mean
x: $fn ({ ys,vars }) => ys
type: histogram
name: mean
opacity: 0.7
marker:
color: yellow
- entity: sensor.openweathermap_temperature
period: day
statistic: min
x: $fn ({ ys,vars }) => ys
type: histogram
name: min
opacity: 0.6
marker:
color: blue
title: Temperature Histogram last 100 days
hours_to_show: 2400
raw_plotly_config: true
layout:
barmode: overlay
margin:
t: 20
l: 50
b: 40
height: 285
xaxis:
autorange: true
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment