haraldh
Vakionaama
Halusin katsoa energiankulutuksen ulkolämpötilan kanssa, olipa yllättävän vaikeaa. Tuollaisella energy-custom-graph kortilla onnistui.
Footeriin kun tekee card_mod päivämäärävalitsimen kuten Energy-sivulla niin voi valita mitä periodia tarkastelee
(varastettu internetistä tämäkin, ei mun tekemä)
Koodi:
type: custom:energy-custom-graph-card
series:
- chart_type: line
stat_type: mean
y_axis: right
color: red
statistic_id: sensor.ute
- statistic_id: sensor.energy_total
stat_type: change
chart_type: bar
grid_options:
columns: full
rows: 6
title: Energiförbrukning vs utetemperatur
timespan:
mode: energy
y_axes:
- id: left
unit: kWh
- id: right
unit: °CFooteriin kun tekee card_mod päivämäärävalitsimen kuten Energy-sivulla niin voi valita mitä periodia tarkastelee
Koodi:
type: energy-date-selection
card_mod:
style:
hui-energy-period-selector$:
ha-date-range-picker$:
date-range-picker$: |
/* Forces the popup to open upwards */
.daterangepicker {
top: auto !important;
bottom: 50px !important; /* Pushes it above the floating bar */
margin-top: 0 !important;
transform-origin: bottom left !important;
}
/* Flip the popup arrow (optional, cosmetic) */
.daterangepicker:before {
border-top: 7px solid #ccc !important;
border-bottom: none !important;
bottom: -7px !important;
top: auto !important;
}
.daterangepicker:after {
border-top: 6px solid #fff !important;
border-bottom: none !important;
bottom: -6px !important;
top: auto !important;
}
.: |
ha-card {
/* Fixed position at the bottom */
position: fixed !important;
bottom: 30px !important;
/* Horizontal centering (Stable method) */
left: var(--mdc-drawer-width, 0px) !important;
right: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
/* Styling / Dimensions */
width: fit-content !important;
min-width: 450px !important;
height: 58px !important;
padding: 0 40px !important;
z-index: 9000 !important;
background: rgba(25, 25, 25, 0.95) !important;
backdrop-filter: blur(15px);
box-shadow: 0px 10px 40px rgba(0,0,0,0.8) !important;
border-radius: 30px !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.card-content {
padding: 0 !important;
width: 100% !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
}
/* Hides the host element in the grid layout */
:host {
position: absolute !important;
width: 0 !important;
height: 0 !important;
z-index: 9000 !important;
}
Viimeksi muokattu:
