iobroker.lovelace
Version:
With this adapter you can build visualization for ioBroker with Home Assistant Lovelace UI
1 lines • 14 kB
JavaScript
"use strict";(self.rspackChunkhome_assistant_frontend=self.rspackChunkhome_assistant_frontend||[]).push([[19472],{90433:function(e,t,i){i.d(t,{Vy:function(){return r},fI:function(){return l},ux:function(){return o}});var n=i(22786),s=i(79468);const a=54;function r(e,t){const i=e%a+1;return t.getPropertyValue(`--color-${i}`)}function l(e,t){const i=t.getPropertyValue(`--graph-color-${e+1}`)||r(e,t);return(0,s.RQ)(i)}const o=(0,n.A)(e=>Array.from({length:a},(t,i)=>l(i,e)),(e,t)=>e[0].getPropertyValue("--graph-color-1")===t[0].getPropertyValue("--graph-color-1")&&e[0].getPropertyValue("--color-1")===t[0].getPropertyValue("--color-1"))},9658:function(e,t,i){i.d(t,{m:function(){return s}});const n={T:1e12,G:1e9,M:1e6,k:1e3,m:.001,"µ":1e-6,"μ":1e-6},s=(e,t)=>{if(!t||t.length<=1)return e;const i=t[0];return i in n?e*n[i]:e}},96832:function(e,t,i){i.a(e,async function(e,t){try{i(89463),i(74423),i(72712),i(18111),i(61701),i(18237),i(62953);var n=i(40445),s=i(5124),a=i(67576),r=i(6412),l=i(89784),o=i(1087),d=i(34127),c=e([d]);d=(c.then?(await c)():c)[0];let h,g,p,u,m,y,b,v=e=>e;class f extends s.WF{render(){const e=this.segments.reduce((e,t,i)=>{var n;return null!==(n=this.hiddenSegments)&&void 0!==n&&n.includes(i)?e:e+t.value},0);return(0,s.qy)(h||(h=v` <div class="container"> ${0} <div class="bar"> ${0} </div> ${0} </div> `),this.heading||this.description?(0,s.qy)(g||(g=v` <div class="heading"> <div class="title"> <span>${0}</span> <span>${0}</span> </div> <slot name="extra"></slot> </div> `),this.heading,this.description):s.s6,this.segments.map((t,i)=>{var n;return(0,s.qy)(p||(p=v` ${0} <div id="segment-${0}" class="${0}" data-index="${0}" ="${0}" style="${0}"></div> `),this.hideTooltip||!t.label?s.s6:(0,s.qy)(u||(u=v` <ha-tooltip for="segment-${0}" placement="top"> ${0} (${0}%) </ha-tooltip> `),i,t.label,(t.value/e*100).toFixed(1)),i,(0,r.H)({clickable:this.barClickable}),i,this.barClickable?this._handleSegmentClick:s.s6,(0,l.W)({width:t.value/e*100+"%",backgroundColor:t.color,display:null!==(n=this.hiddenSegments)&&void 0!==n&&n.includes(i)?"none":"block"}))}),this.hideLegend?s.s6:(0,s.qy)(m||(m=v` <ul class="legend"> ${0} </ul> `),this.segments.map((e,t)=>{var i;return e.label?(0,s.qy)(y||(y=v` <li class="${0}" data-index="${0}" ="${0}"> <div class="bullet" style="${0}"></div> <span class="label">${0}</span> </li> `),(0,r.H)({clickable:this.clickable,hidden:null===(i=this.hiddenSegments)||void 0===i?void 0:i.includes(t)}),t,this.clickable?this._handleLegendClick:s.s6,(0,l.W)({backgroundColor:e.color}),e.label):s.s6})))}_handleSegmentClick(e){const t=e.currentTarget,i=Number(t.dataset.index),n=this.segments[i];n&&(0,o.r)(this,"segment-clicked",{index:i,segment:n})}_handleLegendClick(e){const t=e.currentTarget,i=Number(t.dataset.index),n=this.segments[i];n&&(0,o.r)(this,"legend-item-clicked",{index:i,segment:n})}constructor(...e){super(...e),this.hideLegend=!1,this.hideTooltip=!1,this.clickable=!1,this.barClickable=!1}}f.styles=(0,s.AH)(b||(b=v`.container{width:100%}.heading{display:flex;flex-direction:row;gap:var(--ha-space-2)}.heading .title{flex:1}.heading .title span{color:var(--secondary-text-color);line-height:var(--ha-line-height-expanded);margin-right:8px}.heading .title span:first-child{color:var(--primary-text-color)}.bar{display:flex;overflow:hidden;border-radius:var(--ha-bar-border-radius,var(--ha-border-radius-sm));width:100%;height:12px;margin:2px 0;background-color:var(--ha-bar-background-color,var(--secondary-background-color))}.bar div{height:100%}.bar div.clickable{cursor:pointer}.bar div.clickable:hover{opacity:.8}.legend{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--ha-space-3);margin:12px 0;padding:0;list-style:none}.legend li{display:flex;align-items:center;gap:var(--ha-space-1);font-size:var(--ha-font-size-s)}.legend li .bullet{width:12px;height:12px;border-radius:var(--ha-border-radius-circle)}.spacer{flex:1}.legend li.clickable{cursor:pointer}.legend li.clickable:hover{opacity:.8}.legend li.hidden{opacity:.5}.legend li.hidden .label{text-decoration:line-through}`)),(0,n.Cg)([(0,a.MZ)({attribute:!1})],f.prototype,"segments",void 0),(0,n.Cg)([(0,a.MZ)({type:String})],f.prototype,"heading",void 0),(0,n.Cg)([(0,a.MZ)({type:String})],f.prototype,"description",void 0),(0,n.Cg)([(0,a.MZ)({type:Boolean,attribute:"hide-legend"})],f.prototype,"hideLegend",void 0),(0,n.Cg)([(0,a.MZ)({type:Boolean,attribute:"hide-tooltip"})],f.prototype,"hideTooltip",void 0),(0,n.Cg)([(0,a.MZ)({type:Boolean})],f.prototype,"clickable",void 0),(0,n.Cg)([(0,a.MZ)({type:Boolean,attribute:"bar-clickable"})],f.prototype,"barClickable",void 0),(0,n.Cg)([(0,a.MZ)({attribute:!1})],f.prototype,"hiddenSegments",void 0),f=(0,n.Cg)([(0,a.EM)("ha-segmented-bar")],f),t()}catch(h){t(h)}})},48949:function(e,t,i){i.d(t,{Q:function(){return l}});i(62953);var n=i(40445),s=i(67576),a=i(71769),r=i(84187);const l=e=>{class t extends e{connectedCallback(){super.connectedCallback(),this._unsubMql=(0,a.m)(this.mobileSizeQuery,e=>{this._isMobileSize=e})}disconnectedCallback(){var e;super.disconnectedCallback(),null===(e=this._unsubMql)||void 0===e||e.call(this),this._unsubMql=void 0}constructor(...e){super(...e),this._isMobileSize=!1,this._isMobileClient=r.M,this.mobileSizeQuery="all and (max-width: 450px), all and (max-height: 500px)"}}return(0,n.Cg)([(0,s.wk)()],t.prototype,"_isMobileSize",void 0),t}},62707:function(e,t,i){i.a(e,async function(e,n){try{i.r(t),i.d(t,{HuiDistributionCard:function(){return T}});i(44114),i(18111),i(22489),i(7588),i(61701),i(45367),i(92731),i(3362),i(17642),i(58004),i(33853),i(45876),i(32475),i(15024),i(31698),i(62953);var s=i(40445),a=i(5124),r=i(67576),l=i(6412),o=i(89784),d=i(22786),c=i(1087),h=i(90433),g=i(78870),p=i(71727),u=i(9658),m=i(48949),y=(i(34296),i(76776),i(96832)),b=(i(67094),i(85979)),v=i(20939),f=i(13632),_=e([y,b]);[y,b]=_.then?(await _)():_;let x,k,$,C,w,L,E,M,S,q,z,H,V=e=>e;const N="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3M9 17H7V10H9V17M13 17H11V7H13V17M17 17H15V13H17V17Z",I="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z",Z="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z",D=10,P=6;class T extends((0,m.Q)(a.WF)){static async getConfigElement(){return await Promise.all([i.e(99143),i.e(66990),i.e(81804),i.e(38076),i.e(43762)]).then(i.bind(i,35722)),document.createElement("hui-distribution-card-editor")}static getStubConfig(e,t,i){let n=(0,f.B)(e,3,t,i,["sensor"],e=>{const t=Number(e.state);return"power"===e.attributes.device_class&&!isNaN(t)});if(n.length<2){const t=i.filter(t=>{if(!t.startsWith("sensor."))return!1;const i=e.states[t];if(!i)return!1;const n=Number(i.state);return!isNaN(n)}),s=new Map;t.forEach(t=>{const i=e.states[t].attributes.device_class||"none";s.has(i)||s.set(i,[]),s.get(i).push(t)});let a=[];s.forEach(e=>{e.length>a.length&&(a=e)}),a.length>=2&&(n=a.slice(0,3))}return{type:"distribution",entities:n}}setConfig(e){if(this._config=e,!e.entities||0===e.entities.length)return void(this._configEntities=[]);const t=(0,v.L)(e.entities);this._configEntities=t.map(e=>({entity:e.entity,name:e.name,color:e.color}))}getCardSize(){return 3}getGridOptions(){return{columns:12,rows:"auto",min_columns:3}}_convertToSegments(){const e=getComputedStyle(this),t=[],i=[];if(!this._configEntities||!this.hass)return{segments:t,hiddenIndices:i};return this._configEntities.map((e,t)=>Object.assign(Object.assign({},e),{},{originalIndex:t})).forEach(n=>{const s=this.hass.states[n.entity];if(!s)return;const r=Number(s.state);if(r<=0||isNaN(r))return;const l=(0,u.m)(r,s.attributes.unit_of_measurement),o=n.color?(0,g.MP)(n.color):(0,h.fI)(n.originalIndex,e),d=this.hass.formatEntityName(s,n.name),c=this.hass.formatEntityState(s);t.push({value:l,color:o,label:(0,a.qy)(x||(x=V`${0} <span style="color:var(--secondary-text-color)">${0}</span>`),d,c),entityId:n.entity}),this._hiddenEntities.has(n.entity)&&i.push(t.length-1)}),{segments:t,hiddenIndices:i}}_computeLegendItems(){if(!this._configEntities||!this.hass)return[];const e=getComputedStyle(this);return this._configEntities.map((t,i)=>{const n=this.hass.states[t.entity],s=n?Number(n.state):0,a=this._hiddenEntities.has(t.entity),r=!n||s<=0||isNaN(s),l=n?this.hass.formatEntityName(n,t.name):t.entity,o=n?this.hass.formatEntityState(n):"";return{entity:t.entity,name:l,value:s,formattedValue:o,color:t.color?(0,g.MP)(t.color):(0,h.fI)(i,e),isHidden:a,isDisabled:r}})}_toggleEntity(e){const t=new Set(this._hiddenEntities);t.has(e)?t.delete(e):t.add(e),this._hiddenEntities=t}_handleSegmentClick(e){const{segment:t}=e.detail;t.entityId&&(0,c.r)(this,"hass-more-info",{entityId:t.entityId})}_handleLegendClick(e){const t=e.currentTarget,i=t.dataset.entity,n="true"===t.dataset.disabled;i&&!n&&this._toggleEntity(i)}_handleLegendKeydown(e){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this._handleLegendClick(e))}_toggleExpandLegend(){this._expandLegend=!this._expandLegend}_renderLegend(){const e=this._computeLegendItems(),t=this._isMobileSize?P:D;return(0,a.qy)(k||(k=V` <ul class="legend"> ${0} ${0} </ul> `),e.map((e,i)=>!this._expandLegend&&i>=t?a.s6:(0,a.qy)($||($=V` <li class="${0}" data-entity="${0}" data-disabled="${0}" role="button" aria-pressed="${0}" aria-disabled="${0}" aria-label="${0}" tabindex="${0}" ="${0}" ="${0}"> <div class="bullet" style="${0}"></div> <span class="label">${0}</span> ${0} </li> `),(0,l.H)({"legend-item":!0,hidden:e.isHidden,disabled:e.isDisabled}),e.entity,e.isDisabled,!e.isHidden,e.isDisabled,e.isDisabled?`${e.name} (unavailable)`:e.isHidden?`Show ${e.name}`:`Hide ${e.name}`,e.isDisabled?-1:0,this._handleLegendClick,this._handleLegendKeydown,(0,o.W)({backgroundColor:e.color}),e.name,e.formattedValue?(0,a.qy)(C||(C=V`<span class="value">${0}</span>`),e.formattedValue):a.s6)),e.length>t?(0,a.qy)(w||(w=V` <li> <ha-assist-chip ="${0}" filled .label="${0}"> <ha-svg-icon slot="trailing-icon" .path="${0}"></ha-svg-icon> </ha-assist-chip> </li> `),this._toggleExpandLegend,this._expandLegend?this.hass.localize("ui.components.history_charts.collapse_legend"):`${this.hass.localize("ui.components.history_charts.expand_legend")} (${e.length-t})`,this._expandLegend?Z:I):a.s6)}render(){if(!this._config||!this.hass)return a.s6;if(!this._configEntities||0===this._configEntities.length)return(0,a.qy)(L||(L=V` <ha-card .header="${0}"> <div class="card-content"> <div class="empty-state"> <ha-svg-icon .path="${0}"></ha-svg-icon> <p> ${0} </p> </div> </div> </ha-card> `),this._config.title,N,this.hass.localize("ui.panel.lovelace.cards.distribution.add_entities"));const e=this._configEntities.filter(e=>!this.hass.states[e.entity]);if(e.length===this._configEntities.length)return(0,a.qy)(E||(E=V` <hui-warning .hass="${0}"> ${0} </hui-warning> `),this.hass,e.map(e=>(0,b.j)(this.hass,e.entity)));const t=this._validateDeviceClasses(this._configEntities,this.hass);if(t)return(0,a.qy)(M||(M=V` <hui-warning .hass="${0}"> <ha-alert alert-type="error">${0}</ha-alert> </hui-warning> `),this.hass,t);const i=this._convertToSegments();return(0,a.qy)(S||(S=V` <ha-card .header="${0}"> <div class="card-content"> ${0} ${0} </div> </ha-card> `),this._config.title,0===i.segments.length?(0,a.qy)(q||(q=V` <div class="empty-state"> ${0} </div> `),this.hass.localize("ui.panel.lovelace.cards.distribution.no_data")):(0,a.qy)(z||(z=V` <ha-segmented-bar .heading="${0}" .segments="${0}" .hiddenSegments="${0}" bar-clickable hide-legend -clicked="${0}"></ha-segmented-bar> `),"",i.segments,i.hiddenIndices,this._handleSegmentClick),this._renderLegend())}constructor(...e){super(...e),this._hiddenEntities=new Set,this._expandLegend=!1,this._validateDeviceClasses=(0,d.A)((e,t)=>{const i=new Set,n=new Set;return e.forEach(e=>{const s=t.states[e.entity];if(s){const t=(0,p.m)(e.entity);i.add(t);const a=s.attributes.device_class||"none";n.add(a)}}),i.size>1?t.localize("ui.panel.lovelace.cards.distribution.domain_mismatch",{domains:Array.from(i).join(", ")}):n.size>1?t.localize("ui.panel.lovelace.cards.distribution.device_class_mismatch",{classes:Array.from(n).join(", ")}):null})}}T.styles=(0,a.AH)(H||(H=V`ha-card{height:100%}ha-alert{display:block;word-wrap:break-word;overflow-wrap:break-word}.card-content{padding:var(--ha-space-4)}.legend{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--ha-space-3);margin:var(--ha-space-3) 0 0 0;padding:0;list-style:none}.legend-item{display:flex;align-items:center;gap:var(--ha-space-1);font-size:var(--ha-font-size-s);cursor:pointer;opacity:1;transition:opacity .2s}.legend-item:hover{opacity:.8}.legend-item:focus{outline:2px solid var(--primary-color);outline-offset:2px;opacity:.8}.legend-item.hidden{opacity:.5}.legend-item.hidden .label{text-decoration:line-through}.legend-item.disabled{opacity:.5;cursor:default}.legend-item .bullet{width:12px;height:12px;border-radius:var(--ha-border-radius-circle);flex-shrink:0}.legend-item .label{flex:0 1 auto}.legend-item .value{color:var(--secondary-text-color);margin-left:var(--ha-space-1);flex-shrink:0}.empty-state{text-align:center;color:var(--secondary-text-color);padding:var(--ha-space-4) 0}.empty-state ha-svg-icon{display:block;margin:0 auto var(--ha-space-2);width:48px;height:48px;opacity:.3}.empty-state p{margin:0} (max-width:600px){.card-content{padding:var(--ha-space-2)}}ha-assist-chip{height:24px;--_label-text-weight:500;--_leading-space:8px;--_trailing-space:8px;--_icon-label-space:4px}.legend li:has(ha-assist-chip){cursor:default}`)),(0,s.Cg)([(0,r.MZ)({attribute:!1})],T.prototype,"hass",void 0),(0,s.Cg)([(0,r.wk)()],T.prototype,"_config",void 0),(0,s.Cg)([(0,r.wk)()],T.prototype,"_configEntities",void 0),(0,s.Cg)([(0,r.wk)()],T.prototype,"_hiddenEntities",void 0),(0,s.Cg)([(0,r.wk)()],T.prototype,"_expandLegend",void 0),T=(0,s.Cg)([(0,r.EM)("hui-distribution-card")],T),n()}catch(x){n(x)}})},84187:function(e,t,i){i.d(t,{M:function(){return n}});i(27495);const n=/(?:iphone|android|ipad)/i.test(navigator.userAgent)}}]);