Just discovered this card
LINES NETWORK
Convert kB/s and MB/s with custom legend
yaml
type: custom:apexcharts-card
layout: minimal
graph_span: 1h
apex_config:
tooltip:
style:
fontSize: 14px
x:
show: true
formatter: |
EVAL:(timestamp) => {
let date = new Date(timestamp).toLocaleString('sv-SE',{weekday: 'long', hour: '2-digit', minute:'2-digit'}).toString();
return date.charAt(0).toUpperCase() + date.slice(1);
}
chart:
fontFamily: SF Text
height: 250px
legend:
fontSize: 15px
fontWeight: 600
itemMargin:
horizontal: 25
formatter: |
EVAL:(seriesName, opts) => {
var arr = opts.w.globals.series[opts.seriesIndex],
value = arr[arr.length - 1],
convert = (value / 1024).toFixed(2);
if (value == null) {
return seriesName;
} else {
return value < 1024 ? `${Math.round(value)} kB/s` : `${convert} MB/s`;
}
}
markers:
width: 26
height: 23
customHTML:
- |-
EVAL:() => {
return `<ha-icon icon="mdi:arrow-down-bold" style="--mdc-icon-size: 23px;"></ha-icon>`
}
- |-
EVAL:() => {
return `<ha-icon icon="mdi:arrow-up-bold" style="--mdc-icon-size: 23px;"></ha-icon>`
}
fillColors:
- none
- none
fill:
type: gradient
gradient:
type: vertical
shadeIntensity: 0.2
opacityFrom: 0.7
opacityTo: 0.1
stops:
- 0
- 90
- 100
stroke:
curve: smooth
width: 3
all_series_config:
type: area
fill_raw: last
series:
- entity: sensor.nas_network_down
name: Ned
color: green
- entity: sensor.nas_network_up
name: Upp
color: '#385581'
AREA WEIGHT
Fetch data directly from InfluxDB Using HA or HACS graphs w/ InfluxDB data in HA? - #6 by koying
yaml
type: custom:apexcharts-card
graph_span: 0.3month
apex_config:
yaxis:
show: true
decimalsInFloat: 1
labels:
style:
colors:
- rgba(255, 255, 255, 0.5)
fontSize: 13px
fontWeight: 200
offsetX: -2
grid:
show: true
borderColor: rgba(112, 135, 164, 0.1)
title:
text: kg
style:
color: white
fontSize: 30px
fontWeight: 100
tooltip:
style:
fontSize: 14px
x:
show: true
formatter: |
EVAL:(timestamp) => {
let date = new Date(timestamp).toLocaleString('sv-SE',{day: 'numeric', year: 'numeric', month:'long'}).toString().split(' ');
return `${date[0]} ${date[1].charAt(0).toUpperCase() + date[1].slice(1)} ${date[2]}`;
}
xaxis:
tooltip:
enabled: false
crosshairs:
show: false
axisTicks:
show: false
axisBorder:
show: true
color: rgba(112, 135, 164, 0.5)
height: 1
labels:
style:
fontSize: 15px
fontWeight: 500
offsetX: -1
formatter: |
EVAL:(timestamp) => {
return new Date(timestamp).toLocaleString('sv-SE',{day: 'numeric', month:'short'});
}
chart:
fontFamily: SF Text
height: 350px
fill:
type: gradient
gradient:
type: vertical
shadeIntensity: 0.2
opacityFrom: 0.7
opacityTo: 0.1
stops:
- 0
- 90
- 100
stroke:
curve: smooth
width: 3
all_series_config:
type: area
fill_raw: last
series:
- entity: sensor.date
curve: smooth
name: Mattias
color: '#9a0ca3'
data_generator: |
let params = new URLSearchParams({
db: "home_assistant",
q: "SELECT value FROM kg WHERE entity_id = 'weight'"
}),
request = async () => {
let a = [],
r = await fetch("http://192.168.1.241:8086/query?" + params),
j = await r.json();
for (let r of j.results[0].series[0].values) a.push([new Date(r[0]), r[1]]);
return a
};
return request()
COLUMN ENERGY
Fetch data from Tibber API
yaml
type: custom:apexcharts-card
graph_span: 5months
apex_config:
tooltip:
style:
fontSize: 14px
x:
show: true
formatter: |
EVAL:(timestamp) => {
let date = new Date(timestamp).toLocaleString('sv-SE',{year: 'numeric', month:'long'}).toString()
return date.charAt(0).toUpperCase() + date.slice(1);
}
chart:
height: 400px
fontFamily: SF Text
fill:
type: gradient
gradient:
type: vertical
shadeIntensity: 0.2
opacityFrom: 1
opacityTo: 0.7
stops:
- 0
- 70
- 100
grid:
show: true
borderColor: rgba(112, 135, 164, 0.1)
yaxis:
show: true
decimalsInFloat: 0
labels:
style:
colors:
- rgba(255, 255, 255, 0.5)
fontSize: 13px
fontWeight: 200
offsetX: -2
title:
text: ⚡ kWh
style:
color: white
fontSize: 38px
fontWeight: 700
xaxis:
tooltip:
enabled: false
crosshairs:
show: false
axisTicks:
show: false
axisBorder:
show: true
color: rgba(112, 135, 164, 0.5)
height: 1
labels:
style:
fontSize: 15px
fontWeight: 500
offsetX: -1
formatter: |
EVAL:(timestamp) => {
let date = new Date(timestamp).toLocaleString('en-US',{month:'short'}).toString();
return date.replace('c','k').replace('y','j');
}
series:
- entity: sensor.date
name: Förbrukning
unit: kWh
type: column
color: rgba(228,224,17,1)
data_generator: |
let array = [], request = async () => {
let request = await fetch("https://api.tibber.com/v1-beta/gql", {method:"POST",headers:{Authorization:"Bearer xxx","Content-Type":"application/json"},body:JSON.stringify({query:"{viewer{homes{consumption(resolution: MONTHLY, last: 12){nodes{from consumption}}}}}"})}),
json = await request.json();
console.log(request);
for (let request of json.data.viewer.homes[0].consumption.nodes) array.push([new Date(request.from), request.consumption]);
return array
}; return request()
RADIAL SENSOR
UniFi OS style sensor
yaml
type: grid
cards:
- type: custom:apexcharts-card
chart_type: radialBar
apex_config:
legend:
onItemHover:
highlightDataSeries: false
show: false
chart:
height: 280px
fontFamily: SF Display
plotOptions:
radialBar:
startAngle: -180
endAngle: 180
dataLabels:
name:
show: true
offsetY: 55
value:
show: true
offsetY: 5
fontSize: 50px
fontWeight: 600
color: '#379c55'
total:
show: true
fontSize: 21px
fontWeight: 300
label: CPU Load
color: '#a8a8a8'
formatter: |
EVAL:(w) => {
return w.globals.seriesTotals + '٪';
}
hollow:
size: 75%
image: >-
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 283.5 283.5'%3E%3Cpath d='M117.3
109.2h48.8v4.1h12.2v8.1h-12.2v8.1h12.2v8.1h-12.2v8.1h12.2v8.1h-12.2v8.1h12.2v8.1h-12.2v4.1h-48.8V170h-12.2v-8.1h12.2V154h-12.2v-8.1h12.2v-8.1h-12.2v-8.1h12.2v-8.1h-12.2v-8.1h12.2v-4.3m20.4
44.8v12.2h4.1V154h-4.1m8.1 0v12.2h4.1V154h-4.1m8.2
0v12.2h4.1V154H154z' fill='%23a8a7a7'/%3E%3C/svg%3E
imageWidth: 118
imageHeight: 118
imageOffsetY: -50
imageClipped: false
track:
show: true
background: '#222222'
strokeWidth: 155%
stroke:
dashArray: 3.2
lineCap: butt
series:
- entity: sensor.template_udm_cpu
color: '#379c55'
- type: custom:apexcharts-card
chart_type: radialBar
apex_config:
legend:
onItemHover:
highlightDataSeries: false
show: false
chart:
height: 280px
fontFamily: SF Display
plotOptions:
radialBar:
startAngle: -180
endAngle: 180
dataLabels:
name:
show: true
offsetY: 55
value:
show: true
offsetY: 5
fontSize: 50px
fontWeight: 600
color: '#379c55'
total:
show: true
fontSize: 21px
fontWeight: 300
label: CPU Temp
color: '#a8a8a8'
formatter: |
EVAL:(w) => {
return w.globals.seriesTotals + '°';
}
hollow:
size: 75%
image: >-
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 283.5 283.5'%3E%3Cpath d='M152.1 145.4v-26.9a10.07
10.07 0 1 0-20.2 0v26.9c-7.4 5.6-8.9 16.1-3.4 23.5 5.6 7.4 16.1
8.9 23.5 3.4s8.9-16.1 3.4-23.5c-.9-1.4-2.1-2.5-3.3-3.4M142
115.1a3.37 3.37 0 0 1 3.4 3.4v10.1h-6.7v-10.1c-.1-1.9 1.4-3.4
3.3-3.4z' fill='%23a8a7a7'/%3E%3C/svg%3E
imageWidth: 150
imageHeight: 150
imageOffsetY: -50
imageClipped: false
track:
show: true
background: '#222222'
strokeWidth: 155%
stroke:
dashArray: 3.2
lineCap: butt
series:
- entity: sensor.template_udm_cpu_temp
color: '#379c55'
columns: 2
square: true
DONUT COUNTER
Count total entities {{ states.automation | count }} etc.
yaml
type: custom:apexcharts-card
chart_type: donut
apex_config:
fill:
type: gradient
gradient:
shade: dark
shadeIntensity: 0.1
opacityFrom: 0.9
opacityTo: 0.85
stops:
- 0
- 90
- 100
chart:
fontFamily: SF Text
legend:
position: right
fontSize: 13px
fontWeight: 300
markers:
width: 16
height: 25
customHTML:
- |-
EVAL:() => {
return `<ha-icon icon="hass:robot" style="--mdc-icon-size: 14px;"></ha-icon>`
}
- |-
EVAL:() => {
return `<ha-icon icon="hass:radiobox-blank" style="--mdc-icon-size: 14px;"></ha-icon>`
}
- |-
EVAL:() => {
return `<ha-icon icon="hass:account" style="--mdc-icon-size: 14px;"></ha-icon>`
}
- |-
EVAL:() => {
return `<ha-icon icon="hass:lightbulb" style="--mdc-icon-size: 14px;"></ha-icon>`
}
- |-
EVAL:() => {
return `<ha-icon icon="hass:cast" style="--mdc-icon-size: 14px;"></ha-icon>`
}
- |-
EVAL:() => {
return `<ha-icon icon="hass:eye" style="--mdc-icon-size: 14px;"></ha-icon>`
}
- |-
EVAL:() => {
return `<ha-icon icon="hass:flash" style="--mdc-icon-size: 14px;"></ha-icon>`
}
- |-
EVAL:() => {
return `<ha-icon icon="hass:home-assistant" style="--mdc-icon-size: 14px;"></ha-icon>`
}
fillColors:
- none
- none
- none
- none
- none
- none
- none
- none
stroke:
show: true
width: 0.4
dataLabels:
enabled: false
style:
fontSize: 14px
fontWeight: 700
dropShadow:
enabled: true
top: 0
left: 0
blur: 3
color: black
opacity: 0.1
plotOptions:
pie:
startAngle: 0
endAngle: 360
expandOnClick: true
offsetX: 0
offsetY: 0
customScale: 1
dataLabels:
offset: 0
minAngleToShowLabel: 10
donut:
size: 65%
background: transparent
labels:
show: true
value:
fontSize: 42px
fontWeight: 700
offsetY: 16
total:
show: true
label: Entities
fontSize: 15px
fontWeight: 800
color: '#ffffff50'
series:
- entity: sensor.template_domain_counter
attribute: automation
name: Automations
- entity: sensor.template_domain_counter
attribute: binary_sensor
name: Binary sensors
- entity: sensor.template_domain_counter
attribute: device_tracker
name: Device trackers
- entity: sensor.template_domain_counter
attribute: light
name: Lights
- entity: sensor.template_domain_counter
attribute: media_player
name: Media players
- entity: sensor.template_domain_counter
attribute: sensor
name: Sensors
- entity: sensor.template_domain_counter
attribute: switch
name: Switches
- entity: sensor.template_domain_counter
attribute: other
name: Other
Excuse the yaml, not used to using ui editor
EDIT: fixed “lines network” graph reversal