mirror of
https://github.com/jpawlowski/hass.tibber_prices.git
synced 2026-03-30 05:13:40 +00:00
1 line
No EOL
8.3 KiB
JavaScript
1 line
No EOL
8.3 KiB
JavaScript
"use strict";(globalThis.webpackChunkdocs_split_user=globalThis.webpackChunkdocs_split_user||[]).push([[4078],{3785:(e,n,r)=>{r.r(n),r.d(n,{assets:()=>l,contentTitle:()=>c,default:()=>h,frontMatter:()=>a,metadata:()=>t,toc:()=>o});const t=JSON.parse('{"id":"dashboard-examples","title":"Dashboard Examples","description":"Beautiful dashboard layouts using Tibber Prices sensors.","source":"@site/docs/dashboard-examples.md","sourceDirName":".","slug":"/dashboard-examples","permalink":"/hass.tibber_prices/user/dashboard-examples","draft":false,"unlisted":false,"editUrl":"https://github.com/jpawlowski/hass.tibber_prices/tree/main/docs/user/docs/dashboard-examples.md","tags":[],"version":"current","lastUpdatedAt":1764985026000,"frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"Actions (Services)","permalink":"/hass.tibber_prices/user/actions"},"next":{"title":"Chart Examples","permalink":"/hass.tibber_prices/user/chart-examples"}}');var i=r(4848),s=r(8453);const a={},c="Dashboard Examples",l={},o=[{value:"Basic Price Display Card",id:"basic-price-display-card",level:2},{value:"Period Status Cards",id:"period-status-cards",level:2},{value:"Custom Button Card Examples",id:"custom-button-card-examples",level:2},{value:"Price Level Card",id:"price-level-card",level:3},{value:"Lovelace Layouts",id:"lovelace-layouts",level:2},{value:"Compact Mobile View",id:"compact-mobile-view",level:3},{value:"Desktop Dashboard",id:"desktop-dashboard",level:3},{value:"Icon Color Integration",id:"icon-color-integration",level:2},{value:"Picture Elements Dashboard",id:"picture-elements-dashboard",level:2},{value:"Auto-Entities Dynamic Lists",id:"auto-entities-dynamic-lists",level:2}];function d(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,s.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.header,{children:(0,i.jsx)(n.h1,{id:"dashboard-examples",children:"Dashboard Examples"})}),"\n",(0,i.jsx)(n.p,{children:"Beautiful dashboard layouts using Tibber Prices sensors."}),"\n",(0,i.jsx)(n.h2,{id:"basic-price-display-card",children:"Basic Price Display Card"}),"\n",(0,i.jsx)(n.p,{children:"Simple card showing current price with dynamic color:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-yaml",children:"type: entities\ntitle: Current Electricity Price\nentities:\n - entity: sensor.tibber_home_current_interval_price\n name: Current Price\n icon: mdi:flash\n - entity: sensor.tibber_home_current_interval_rating\n name: Price Rating\n - entity: sensor.tibber_home_next_interval_price\n name: Next Price\n"})}),"\n",(0,i.jsx)(n.h2,{id:"period-status-cards",children:"Period Status Cards"}),"\n",(0,i.jsx)(n.p,{children:"Show when best/peak price periods are active:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-yaml",children:"type: horizontal-stack\ncards:\n - type: entity\n entity: binary_sensor.tibber_home_best_price_period\n name: Best Price Active\n icon: mdi:currency-eur-off\n - type: entity\n entity: binary_sensor.tibber_home_peak_price_period\n name: Peak Price Active\n icon: mdi:alert\n"})}),"\n",(0,i.jsx)(n.h2,{id:"custom-button-card-examples",children:"Custom Button Card Examples"}),"\n",(0,i.jsx)(n.h3,{id:"price-level-card",children:"Price Level Card"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-yaml",children:"type: custom:button-card\nentity: sensor.tibber_home_current_interval_level\nname: Price Level\nshow_state: true\nstyles:\n card:\n - background: |\n [[[\n if (entity.state === 'LOWEST') return 'linear-gradient(135deg, #00ffa3 0%, #00d4ff 100%)';\n if (entity.state === 'LOW') return 'linear-gradient(135deg, #4dddff 0%, #00ffa3 100%)';\n if (entity.state === 'NORMAL') return 'linear-gradient(135deg, #ffd700 0%, #ffb800 100%)';\n if (entity.state === 'HIGH') return 'linear-gradient(135deg, #ff8c00 0%, #ff6b00 100%)';\n if (entity.state === 'HIGHEST') return 'linear-gradient(135deg, #ff4500 0%, #dc143c 100%)';\n return 'var(--card-background-color)';\n ]]]\n"})}),"\n",(0,i.jsx)(n.h2,{id:"lovelace-layouts",children:"Lovelace Layouts"}),"\n",(0,i.jsx)(n.h3,{id:"compact-mobile-view",children:"Compact Mobile View"}),"\n",(0,i.jsx)(n.p,{children:"Optimized for mobile devices:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-yaml",children:"type: vertical-stack\ncards:\n - type: custom:mini-graph-card\n entities:\n - entity: sensor.tibber_home_current_interval_price\n name: Today's Prices\n hours_to_show: 24\n points_per_hour: 4\n\n - type: glance\n entities:\n - entity: sensor.tibber_home_best_price_start_time\n name: Best Period Starts\n - entity: binary_sensor.tibber_home_best_price_period\n name: Active Now\n"})}),"\n",(0,i.jsx)(n.h3,{id:"desktop-dashboard",children:"Desktop Dashboard"}),"\n",(0,i.jsx)(n.p,{children:"Full-width layout for desktop:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-yaml",children:"type: grid\ncolumns: 3\nsquare: false\ncards:\n - type: custom:apexcharts-card\n # See chart-examples.md for ApexCharts config\n\n - type: vertical-stack\n cards:\n - type: entities\n title: Current Status\n entities:\n - sensor.tibber_home_current_interval_price\n - sensor.tibber_home_current_interval_rating\n\n - type: vertical-stack\n cards:\n - type: entities\n title: Statistics\n entities:\n - sensor.tibber_home_daily_avg_today\n - sensor.tibber_home_daily_min_today\n - sensor.tibber_home_daily_max_today\n"})}),"\n",(0,i.jsx)(n.h2,{id:"icon-color-integration",children:"Icon Color Integration"}),"\n",(0,i.jsxs)(n.p,{children:["Using the ",(0,i.jsx)(n.code,{children:"icon_color"})," attribute for dynamic colors:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-yaml",children:"type: custom:mushroom-chips-card\nchips:\n - type: entity\n entity: sensor.tibber_home_current_interval_price\n icon_color: \"{{ state_attr('sensor.tibber_home_current_interval_price', 'icon_color') }}\"\n\n - type: entity\n entity: binary_sensor.tibber_home_best_price_period\n icon_color: green\n\n - type: entity\n entity: binary_sensor.tibber_home_peak_price_period\n icon_color: red\n"})}),"\n",(0,i.jsxs)(n.p,{children:["See ",(0,i.jsx)(n.a,{href:"/hass.tibber_prices/user/icon-colors",children:"Icon Colors"})," for detailed color mapping."]}),"\n",(0,i.jsx)(n.h2,{id:"picture-elements-dashboard",children:"Picture Elements Dashboard"}),"\n",(0,i.jsx)(n.p,{children:"Advanced interactive dashboard:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-yaml",children:"type: picture-elements\nimage: /local/electricity_dashboard_bg.png\nelements:\n - type: state-label\n entity: sensor.tibber_home_current_interval_price\n style:\n top: 20%\n left: 50%\n font-size: 32px\n font-weight: bold\n\n - type: state-badge\n entity: binary_sensor.tibber_home_best_price_period\n style:\n top: 40%\n left: 30%\n\n # Add more elements...\n"})}),"\n",(0,i.jsx)(n.h2,{id:"auto-entities-dynamic-lists",children:"Auto-Entities Dynamic Lists"}),"\n",(0,i.jsx)(n.p,{children:"Automatically list all price sensors:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-yaml",children:'type: custom:auto-entities\ncard:\n type: entities\n title: All Price Sensors\nfilter:\n include:\n - entity_id: "sensor.tibber_*_price"\n exclude:\n - state: unavailable\nsort:\n method: state\n numeric: true\n'})}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsxs)(n.p,{children:["\ud83d\udca1 ",(0,i.jsx)(n.strong,{children:"Related:"})]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.a,{href:"/hass.tibber_prices/user/chart-examples",children:"Chart Examples"})," - ApexCharts configurations"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.a,{href:"/hass.tibber_prices/user/dynamic-icons",children:"Dynamic Icons"})," - Icon behavior"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.a,{href:"/hass.tibber_prices/user/icon-colors",children:"Icon Colors"})," - Color attributes"]}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}}}]); |