iobroker.lovelace
Version:
With this adapter you can build visualization for ioBroker with Home Assistant Lovelace UI
1 lines • 13.1 kB
JavaScript
export const __rspack_esm_id=19472;export const __rspack_esm_ids=[19472];export const __webpack_modules__={90433(e,t,i){i.d(t,{Vy:()=>n,fI:()=>r,ux:()=>l});var s=i(22786),a=i(79468);function n(e,t){const i=e%54+1;return t.getPropertyValue(`--color-${i}`)}function r(e,t){const i=t.getPropertyValue(`--graph-color-${e+1}`)||n(e,t);return(0,a.RQ)(i)}const l=(0,s.A)(e=>Array.from({length:54},(t,i)=>r(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(e,t,i){i.d(t,{m:()=>a});const s={T:1e12,G:1e9,M:1e6,k:1e3,m:.001,µ:1e-6,μ:1e-6},a=(e,t)=>{if(!t||t.length<=1)return e;const i=t[0];return i in s?e*s[i]:e}},96832(e,t,i){i.a(e,async function(e,t){try{i(74423),i(18111),i(61701),i(18237);var s=i(62826),a=i(5124),n=i(22441),r=i(6412),l=i(89784),o=i(1087),d=i(34127),c=e([d]);d=(c.then?(await c)():c)[0];class h extends a.WF{render(){const e=this.segments.reduce((e,t,i)=>this.hiddenSegments?.includes(i)?e:e+t.value,0);return a.qy` <div class="container"> ${this.heading||this.description?a.qy` <div class="heading"> <div class="title"> <span>${this.heading}</span> <span>${this.description}</span> </div> <slot name="extra"></slot> </div> `:a.s6} <div class="bar"> ${this.segments.map((t,i)=>a.qy` ${this.hideTooltip||!t.label?a.s6:a.qy` <ha-tooltip for="segment-${i}" placement="top"> ${t.label} (${(t.value/e*100).toFixed(1)}%) </ha-tooltip> `} <div id="segment-${i}" class="${(0,r.H)({clickable:this.barClickable})}" data-index="${i}" ="${this.barClickable?this._handleSegmentClick:a.s6}" style="${(0,l.W)({width:t.value/e*100+"%",backgroundColor:t.color,display:this.hiddenSegments?.includes(i)?"none":"block"})}"></div> `)} </div> ${this.hideLegend?a.s6:a.qy` <ul class="legend"> ${this.segments.map((e,t)=>e.label?a.qy` <li class="${(0,r.H)({clickable:this.clickable,hidden:this.hiddenSegments?.includes(t)})}" data-index="${t}" ="${this.clickable?this._handleLegendClick:a.s6}"> <div class="bullet" style="${(0,l.W)({backgroundColor:e.color})}"></div> <span class="label">${e.label}</span> </li> `:a.s6)} </ul> `} </div> `}_handleSegmentClick(e){const t=e.currentTarget,i=Number(t.dataset.index),s=this.segments[i];s&&(0,o.r)(this,"segment-clicked",{index:i,segment:s})}_handleLegendClick(e){const t=e.currentTarget,i=Number(t.dataset.index),s=this.segments[i];s&&(0,o.r)(this,"legend-item-clicked",{index:i,segment:s})}constructor(...e){super(...e),this.hideLegend=!1,this.hideTooltip=!1,this.clickable=!1,this.barClickable=!1}}h.styles=a.AH`.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,s.Cg)([(0,n.MZ)({attribute:!1})],h.prototype,"segments",void 0),(0,s.Cg)([(0,n.MZ)({type:String})],h.prototype,"heading",void 0),(0,s.Cg)([(0,n.MZ)({type:String})],h.prototype,"description",void 0),(0,s.Cg)([(0,n.MZ)({type:Boolean,attribute:"hide-legend"})],h.prototype,"hideLegend",void 0),(0,s.Cg)([(0,n.MZ)({type:Boolean,attribute:"hide-tooltip"})],h.prototype,"hideTooltip",void 0),(0,s.Cg)([(0,n.MZ)({type:Boolean})],h.prototype,"clickable",void 0),(0,s.Cg)([(0,n.MZ)({type:Boolean,attribute:"bar-clickable"})],h.prototype,"barClickable",void 0),(0,s.Cg)([(0,n.MZ)({attribute:!1})],h.prototype,"hiddenSegments",void 0),h=(0,s.Cg)([(0,n.EM)("ha-segmented-bar")],h),t()}catch(e){t(e)}})},48949(e,t,i){i.d(t,{Q:()=>l});var s=i(62826),a=i(22441),n=i(71769),r=i(84187);const l=e=>{class t extends e{connectedCallback(){super.connectedCallback(),this._unsubMql=(0,n.m)(this.mobileSizeQuery,e=>{this._isMobileSize=e})}disconnectedCallback(){super.disconnectedCallback(),this._unsubMql?.(),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,s.Cg)([(0,a.wk)()],t.prototype,"_isMobileSize",void 0),t}},62707(e,t,i){i.a(e,async function(e,s){try{i.r(t),i.d(t,{HuiDistributionCard:()=>L});i(44114),i(18111),i(22489),i(7588),i(61701),i(45367),i(92731),i(17642),i(58004),i(33853),i(45876),i(32475),i(15024),i(31698);var a=i(62826),n=i(5124),r=i(22441),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),_=i(13632),f=e([y,b]);[y,b]=f.then?(await f)():f;const x="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",$="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z",k="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z",C=10,w=6;class L extends((0,m.Q)(n.WF)){static async getConfigElement(){return await Promise.all([i.e(99143),i.e(66990),i.e(38076),i.e(43762)]).then(i.bind(i,35722)),document.createElement("hui-distribution-card-editor")}static getStubConfig(e,t,i){let s=(0,_.B)(e,3,t,i,["sensor"],e=>{const t=Number(e.state);return"power"===e.attributes.device_class&&!isNaN(t)});if(s.length<2){const t=i.filter(t=>{if(!t.startsWith("sensor."))return!1;const i=e.states[t];if(!i)return!1;const s=Number(i.state);return!isNaN(s)}),a=new Map;t.forEach(t=>{const i=e.states[t].attributes.device_class||"none";a.has(i)||a.set(i,[]),a.get(i).push(t)});let n=[];a.forEach(e=>{e.length>n.length&&(n=e)}),n.length>=2&&(s=n.slice(0,3))}return{type:"distribution",entities:s}}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)=>({...e,originalIndex:t})).forEach(s=>{const a=this.hass.states[s.entity];if(!a)return;const r=Number(a.state);if(r<=0||isNaN(r))return;const l=(0,u.m)(r,a.attributes.unit_of_measurement),o=s.color?(0,g.MP)(s.color):(0,h.fI)(s.originalIndex,e),d=this.hass.formatEntityName(a,s.name),c=this.hass.formatEntityState(a);t.push({value:l,color:o,label:n.qy`${d} <span style="color:var(--secondary-text-color)">${c}</span>`,entityId:s.entity}),this._hiddenEntities.has(s.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 s=this.hass.states[t.entity],a=s?Number(s.state):0,n=this._hiddenEntities.has(t.entity),r=!s||a<=0||isNaN(a),l=s?this.hass.formatEntityName(s,t.name):t.entity,o=s?this.hass.formatEntityState(s):"";return{entity:t.entity,name:l,value:a,formattedValue:o,color:t.color?(0,g.MP)(t.color):(0,h.fI)(i,e),isHidden:n,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,s="true"===t.dataset.disabled;i&&!s&&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?w:C;return n.qy` <ul class="legend"> ${e.map((e,i)=>!this._expandLegend&&i>=t?n.s6:n.qy` <li class="${(0,l.H)({"legend-item":!0,hidden:e.isHidden,disabled:e.isDisabled})}" data-entity="${e.entity}" data-disabled="${e.isDisabled}" role="button" aria-pressed="${!e.isHidden}" aria-disabled="${e.isDisabled}" aria-label="${e.isDisabled?`${e.name} (unavailable)`:e.isHidden?`Show ${e.name}`:`Hide ${e.name}`}" tabindex="${e.isDisabled?-1:0}" ="${this._handleLegendClick}" ="${this._handleLegendKeydown}"> <div class="bullet" style="${(0,o.W)({backgroundColor:e.color})}"></div> <span class="label">${e.name}</span> ${e.formattedValue?n.qy`<span class="value">${e.formattedValue}</span>`:n.s6} </li> `)} ${e.length>t?n.qy` <li> <ha-assist-chip ="${this._toggleExpandLegend}" filled .label="${this._expandLegend?this.hass.localize("ui.components.history_charts.collapse_legend"):`${this.hass.localize("ui.components.history_charts.expand_legend")} (${e.length-t})`}"> <ha-svg-icon slot="trailing-icon" .path="${this._expandLegend?k:$}"></ha-svg-icon> </ha-assist-chip> </li> `:n.s6} </ul> `}render(){if(!this._config||!this.hass)return n.s6;if(!this._configEntities||0===this._configEntities.length)return n.qy` <ha-card .header="${this._config.title}"> <div class="card-content"> <div class="empty-state"> <ha-svg-icon .path="${x}"></ha-svg-icon> <p> ${this.hass.localize("ui.panel.lovelace.cards.distribution.add_entities")} </p> </div> </div> </ha-card> `;const e=this._configEntities.filter(e=>!this.hass.states[e.entity]);if(e.length===this._configEntities.length)return n.qy` <hui-warning .hass="${this.hass}"> ${e.map(e=>(0,b.j)(this.hass,e.entity))} </hui-warning> `;const t=this._validateDeviceClasses(this._configEntities,this.hass);if(t)return n.qy` <hui-warning .hass="${this.hass}"> <ha-alert alert-type="error">${t}</ha-alert> </hui-warning> `;const i=this._convertToSegments();return n.qy` <ha-card .header="${this._config.title}"> <div class="card-content"> ${0===i.segments.length?n.qy` <div class="empty-state"> ${this.hass.localize("ui.panel.lovelace.cards.distribution.no_data")} </div> `:n.qy` <ha-segmented-bar .heading="${""}" .segments="${i.segments}" .hiddenSegments="${i.hiddenIndices}" bar-clickable hide-legend -clicked="${this._handleSegmentClick}"></ha-segmented-bar> `} ${this._renderLegend()} </div> </ha-card> `}constructor(...e){super(...e),this._hiddenEntities=new Set,this._expandLegend=!1,this._validateDeviceClasses=(0,d.A)((e,t)=>{const i=new Set,s=new Set;return e.forEach(e=>{const a=t.states[e.entity];if(a){const t=(0,p.m)(e.entity);i.add(t);const n=a.attributes.device_class||"none";s.add(n)}}),i.size>1?t.localize("ui.panel.lovelace.cards.distribution.domain_mismatch",{domains:Array.from(i).join(", ")}):s.size>1?t.localize("ui.panel.lovelace.cards.distribution.device_class_mismatch",{classes:Array.from(s).join(", ")}):null})}}L.styles=n.AH`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,a.Cg)([(0,r.MZ)({attribute:!1})],L.prototype,"hass",void 0),(0,a.Cg)([(0,r.wk)()],L.prototype,"_config",void 0),(0,a.Cg)([(0,r.wk)()],L.prototype,"_configEntities",void 0),(0,a.Cg)([(0,r.wk)()],L.prototype,"_hiddenEntities",void 0),(0,a.Cg)([(0,r.wk)()],L.prototype,"_expandLegend",void 0),L=(0,a.Cg)([(0,r.EM)("hui-distribution-card")],L),s()}catch(e){s(e)}})},84187(e,t,i){i.d(t,{M:()=>s});const s=/(?:iphone|android|ipad)/i.test(navigator.userAgent)}};