Hello
I would like to have 1 small raw at left : RPI4 sensor, and 1 big raw (= 2 small raw) at right: APEX chart of my RPI4. Same thing for thers the 2 others below (NAS and Livebox).
How is it possible?
the code:
type: grid
cards:
- type: custom:button-card
entity: sensor.processor_temperature
icon: mdi:raspberry-pi
aspect_ratio: 11/9
name: RPI4
styles:
card:
- border-radius: 10%
- padding: 10%
- font-size: 14px
custom_fields:
cpu:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["sensor.rpi4_cpu_percent"].state > 15) return
"#ff9800"; ]]]
ram:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["sensor.rpi4_mem_percent"].state > 40) return
"#ff9800"; ]]]
HDD:
- align-self: middle
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["sensor.disk_use_percent"].state > 50) return
"#ff9800"; ]]]
temp:
- font-size: 12px
- align-self: start
- justify-self: end
grid:
- grid-template-areas: '"i temp" "n n" "cpu cpu" "ram ram" "HDD HDD"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
icon:
- color:
- - - >-
if (entity.state < 50) return '#fdd835'; if (entity.state >=
60 && entity.state < 80) return '#ff9800'; else return 'red';
- width: 70%
- margin-top: '-10%'
img_cell:
- justify-content: start
- align-items: start
- margin: none
name:
- font-weight: bold
- font-size: 14px
- align-self: middle
- justify-self: start
- padding-bottom: 4px
custom_fields:
cpu: |
[[[
return `<ha-icon
icon="mdi:server"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>CPU: <span style="color: var(--text-color-sensore_p);">${states['sensor.rpi4_cpu_percent'].state}%</span></span>`
]]]
ram: |
[[[
return `<ha-icon
icon="mdi:memory"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>RAM: <span style="color: var(--text-color-sensor);">${states['sensor.rpi4_mem_percent'].state}%</span></span>`
]]]
HDD: |
[[[
return `<ha-icon
icon="mdi:harddisk"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>HDD: <span style="color: var(--text-color-sensor);">${states['sensor.disk_use_percent'].state}%</span></span>`
]]]
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width: 12px; height: 12px; color: #fdd835;">
</ha-icon><span>${entity.state}°C</span>`
]]]
- type: custom:apexcharts-card
graph_span: 12h
header:
title: RPI 4
apex_config:
chart:
height: 160
yaxis:
- tickAmount: 4
decimalsInFloat: 0
all_series_config:
stroke_width: 2
type: area
series:
- entity: sensor.rpi4_mem_percent
name: MEM
curve: smooth
type: line
group_by:
duration: 5min
- entity: sensor.rpi4_cpu_percent
name: CPU
curve: smooth
type: line
group_by:
duration: 5min
invert: false
- type: custom:button-card
entity: sensor.diskstation_temperature
icon: mdi:nas
aspect_ratio: 11/9
name: NAS
styles:
card:
- border-radius: 10%
- padding: 10%
- font-size: 14px
custom_fields:
cpu:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["sensor.diskstation_cpu_utilization_total"].state >
15) return "#ff9800"; ]]]
ram:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["sensor.diskstation_memory_usage_real"].state > 30)
return "#ff9800"; ]]]
HDD:
- align-self: middle
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["sensor.diskstation_volume_1_volume_used"].state >
80) return "#ff9800"; ]]]
temp:
- font-size: 12px
- align-self: start
- justify-self: end
grid:
- grid-template-areas: '"i temp" "n n" "cpu cpu" "ram ram" "HDD HDD"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
icon:
- color:
- - - >-
if (entity.state < 50) return '#fdd835'; if (entity.state >=
60 && entity.state < 80) return 'orange'; else return 'red';
- width: 70%
- margin-top: '-10%'
img_cell:
- justify-content: start
- align-items: start
- margin: none
name:
- font-weight: bold
- font-size: 14px
- align-self: middle
- justify-self: start
- padding-bottom: 4px
custom_fields:
cpu: |
[[[
return `<ha-icon
icon="mdi:server"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>CPU: <span style="color: var(--text-color-sensor);">${states['sensor.diskstation_cpu_utilization_total'].state}%</span></span>`
]]]
ram: |
[[[
return `<ha-icon
icon="mdi:memory"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>RAM: <span style="color: var(--text-color-sensor);">${states['sensor.diskstation_memory_usage_real'].state}%</span></span>`
]]]
HDD: |
[[[
return `<ha-icon
icon="mdi:harddisk"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>HDD: <span style="color: var(--text-color-sensor);">${states['sensor.diskstation_volume_1_volume_used'].state}%</span></span>`
]]]
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width: 12px; height: 12px; color: #fdd835;">
</ha-icon><span>${entity.state}°C</span>`
]]]
- type: custom:apexcharts-card
graph_span: 12h
header:
title: NAS
apex_config:
chart:
height: 160
yaxis:
- tickAmount: 4
decimalsInFloat: 0
all_series_config:
stroke_width: 2
type: area
series:
- entity: sensor.diskstation_memory_usage_real
name: MEM
curve: smooth
type: line
group_by:
duration: 5min
func: avg
- entity: sensor.diskstation_cpu_utilization_total
name: CPU
curve: smooth
type: line
group_by:
duration: 5min
func: avg
invert: false
- entity: binary_sensor.wan_status
show_icon: false
aspect_ratio: 11/9
name: LIVEBOX
styles:
card:
- border-radius: 10%
- padding: 5%
- font-size: 14px
grid:
- grid-template-areas: '"i WAN" "n n" "Down Down" "Upl Upl" "HPB HPB" "HPC HPC"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-weight: bold
- font-size: 14px
- align-self: middle
- justify-self: start
- padding-bottom: 10px
custom_fields:
WAN:
- align-self: start
- justify-self: middle
Down:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["sensor.orange_livebox_download_speed"].state > 80)
return "red"; ]]]
Upl:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["sensor.orange_livebox_upload_speed"].state > 80)
return "red"; ]]]
HPB:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["sensor.hp_envy_5640_series_black_ink"].state < 30)
return "red"; ]]]
HPC:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["sensor.hp_envy_5640_series_tri_color_ink"].state <
30) return "red"; ]]]
custom_fields:
WAN: |
[[[
var statecolor = (entity.state == 'on') ? 'var(--paper-item-icon-active-color)' : 'var(--paper-item-icon-color)';
return `<ha-icon
icon="mdi:server-network"
style="width: 25px; height: 25px; color: ${statecolor};">
</ha-icon>`
]]]
Down: |
[[[
return `<ha-icon
icon="mdi:download"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>Dl: <span style="color: var(--text-color-sensor);">${states['sensor.orange_livebox_download_speed'].state}MBs</span></span>`
]]]
Upl: |
[[[
return `<ha-icon
icon="mdi:upload"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>Up: <span style="color: var(--text-color-sensor);">${states['sensor.orange_livebox_upload_speed'].state}MBs</span></span>`
]]]
HPB: |
[[[
return `<ha-icon
icon="mdi:water"
style="width: 12px; height: 12px; color: black;">
</ha-icon><span>HP Black: <span style="color: var(--text-color-sensor);">${states['sensor.hp_envy_5640_series_black_ink'].state}%</span></span>`
]]]
HPC: |
[[[
return `<ha-icon
icon="mdi:water"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>HP Color: <span style="color: var(--text-color-sensor);">${states['sensor.hp_envy_5640_series_tri_color_ink'].state}%</span></span>`
]]]
type: custom:button-card
- type: custom:apexcharts-card
graph_span: 12h
header:
title: HASS
apex_config:
chart:
height: 160
yaxis:
- show: true
decimalsInFloat: 1
forceNiceScale: true
all_series_config:
stroke_width: 2
type: area
series:
- entity: sensor.orange_livebox_kib_s_received
name: Dl
curve: smooth
type: line
group_by:
duration: 10min
func: avg
transform: return x / 1024;
unit: Mbs
- entity: sensor.orange_livebox_kib_s_sent_2
name: Up
curve: smooth
type: line
transform: return x / 1024;
unit: Mbs
group_by:
duration: 10min
func: avg
invert: false
square: false
columns: 2