iobroker.lovelace
Version:
With this adapter you can build visualization for ioBroker with Home Assistant Lovelace UI
1 lines • 14.4 kB
JavaScript
"use strict";(self.rspackChunkhome_assistant_frontend=self.rspackChunkhome_assistant_frontend||[]).push([[24404],{90433:function(t,e,i){i.d(e,{Vy:function(){return o},fI:function(){return r},ux:function(){return c}});var s=i(22786),a=i(79468);const n=54;function o(t,e){const i=t%n+1;return e.getPropertyValue(`--color-${i}`)}function r(t,e){const i=e.getPropertyValue(`--graph-color-${t+1}`)||o(t,e);return(0,a.RQ)(i)}const c=(0,s.A)(t=>Array.from({length:n},(e,i)=>r(i,t)),(t,e)=>t[0].getPropertyValue("--graph-color-1")===e[0].getPropertyValue("--graph-color-1")&&t[0].getPropertyValue("--color-1")===e[0].getPropertyValue("--color-1"))},29961:function(t,e,i){i.a(t,async function(t,s){try{i.d(e,{d:function(){return c},n:function(){return h}});var a=i(72487),n=i(30162),o=t([a,n]);function c(t,e,i){return"month"===t?{formatter:t=>{const s=new Date(t);return 0===s.getMonth()?`{bold|${(0,a.fr)(s,e,i)}}`:(0,a.Wq)(s,e,i)}}:"year"===t?{formatter:t=>(0,a.Pm)(new Date(t),e,i)}:void 0}function h(t,e,i,s){const o=s/60/24,r=new Date(t);if(o>88)return 0===r.getMonth()?`{bold|${(0,a.fr)(r,e,i)}}`:(0,a.Wq)(r,e,i);if(o>35)return 1===r.getDate()?`{bold|${(0,a.sl)(r,e,i)}}`:(0,a.sl)(r,e,i);if(o>7){const t=(0,a.sl)(r,e,i);return 1===r.getDate()?`{bold|${t}}`:t}return o>2?(0,a.gu)(r,e,i):s&&s<5?(0,n.ie)(r,e,i):0===r.getHours()&&0===r.getMinutes()&&0===r.getSeconds()?`{bold|${(0,a.sl)(r,e,i)}}`:(0,n.fU)(r,e,i)}[a,n]=o.then?(await o)():o,s()}catch(r){s(r)}})},33062:function(t,e,i){i(62953);var s=i(40445),a=i(5124),n=i(67576);let o;class r extends a.WF{willUpdate(t){t.has("color")&&(this.style.backgroundColor=this.color)}render(){return a.s6}constructor(...t){super(...t),this.color="",this.rtl=!1}}r.styles=(0,a.AH)(o||(o=(t=>t)`:host{display:inline-block;margin-inline-end:4px;margin-inline-start:initial;border-radius:10px;width:10px;height:10px;vertical-align:middle}:host([rtl]){direction:rtl}`)),(0,s.Cg)([(0,n.MZ)()],r.prototype,"color",void 0),(0,s.Cg)([(0,n.MZ)({type:Boolean,reflect:!0})],r.prototype,"rtl",void 0),r=(0,s.Cg)([(0,n.EM)("ha-chart-tooltip-marker")],r)},54706:function(t,e,i){i.d(e,{E:function(){return n}});i(74423),i(18111),i(13579),i(3362),i(62953);var s=i(40445),a=i(67576);const n=t=>{class e extends t{connectedCallback(){super.connectedCallback(),this._checkSubscribed()}disconnectedCallback(){if(super.disconnectedCallback(),this.__unsubs){for(;this.__unsubs.length;){const t=this.__unsubs.pop();t instanceof Promise?t.then(t=>t()):t()}this.__unsubs=void 0}}updated(t){if(super.updated(t),t.has("hass"))this._checkSubscribed();else if(this.hassSubscribeRequiredHostProps)for(const e of t.keys())if(this.hassSubscribeRequiredHostProps.includes(e))return void this._checkSubscribed()}hassSubscribe(){return[]}_checkSubscribed(){var t;void 0!==this.__unsubs||!this.isConnected||void 0===this.hass||null!==(t=this.hassSubscribeRequiredHostProps)&&void 0!==t&&t.some(t=>void 0===this[t])||(this.__unsubs=this.hassSubscribe())}}return(0,s.Cg)([(0,a.MZ)({attribute:!1})],e.prototype,"hass",void 0),e}},18427:function(t,e,i){i.d(e,{g:function(){return n}});i(42762);var s=i(79468),a=i(39274);function n(t,e,i,n,o,r){const c=t.getPropertyValue(o+"-"+r).trim(),h=c.length>0?c:t.getPropertyValue(o).trim();let d=(0,s.RQ)(h);return 0===c.length&&r&&(d=(0,s.v2)((0,s.BE)(e?(0,a.T)((0,s.Nc)((0,s.xp)(d)),r):(0,a.d)((0,s.Nc)((0,s.xp)(d)),r)))),n?d+=i?"32":"7F":i&&(d+="7F"),d}},78231:function(t,e,i){i.a(t,async function(t,s){try{i.r(e),i.d(e,{HuiEnergyDevicesGraphCard:function(){return H}});i(74423),i(44114),i(72712),i(26910),i(18111),i(22489),i(20116),i(7588),i(61701),i(18237),i(3362),i(62953);var a=i(40445),n=i(5124),o=i(67576),r=i(6412),c=i(22786),h=i(94913),d=i(90433),l=i(20058),u=i(44439),p=(i(33062),i(38114)),_=i(23528),g=i(54706),m=i(784),v=(i(76776),i(1087)),y=i(3461),f=i(26300),b=i(93905),k=i(71769),C=i(18427),S=t([u,f,p,_,l]);[u,f,p,_,l]=S.then?(await S)():S;let x,w,$,M,T=t=>t;const D="M13,2.05V5.08C16.39,5.57 19,8.47 19,12C19,12.9 18.82,13.75 18.5,14.54L21.12,16.07C21.68,14.83 22,13.45 22,12C22,6.82 18.05,2.55 13,2.05M12,19A7,7 0 0,1 5,12C5,8.47 7.61,5.57 11,5.08V2.05C5.94,2.55 2,6.81 2,12A10,10 0 0,0 12,22C15.3,22 18.23,20.39 20.05,17.91L17.45,16.38C16.17,18 14.21,19 12,19Z",V="M22,21H2V3H4V19H6V10H10V19H12V6H16V19H18V14H22V21Z";class H extends((0,g.E)(n.WF)){static async getConfigElement(){return await i.e(88899).then(i.bind(i,2670)),document.createElement("hui-energy-devices-card-editor")}static getStubConfig(t,e,i){return{type:"energy-devices-graph"}}hassSubscribe(){var t;return[(0,p.tb)(this.hass,{key:null===(t=this._config)||void 0===t?void 0:t.collection_key}).subscribe(t=>{this._data=t,this._getStatistics(t)}),(0,k.m)("all and (max-width: 450px), all and (max-height: 500px)",t=>{this._isMobile=t})]}getCardSize(){return 3}setConfig(t){t.collection_key&&(0,p.s8)(t.collection_key),this._config=t}_getAllowedModes(){var t;return null!==(t=this._config)&&void 0!==t&&t.modes&&0!==this._config.modes.length?this._config.modes:["bar","pie"]}shouldUpdate(t){return(0,m.xP)(this,t)||t.size>1||!t.has("hass")}willUpdate(t){if(super.willUpdate(t),t.has("_config")&&this._config){const t=this._getAllowedModes();this._chartType&&t.includes(this._chartType)||(this._chartType=t[0])}}render(){var t;if(!this.hass||!this._config||!this._chartType)return n.s6;const e=this._getAllowedModes();return(0,n.qy)(x||(x=T` <ha-card> <div class="card-header"> <span>${0}</span> ${0} </div> <div class="content ${0}"> <ha-chart-base .hass="${0}" .data="${0}" .options="${0}" .height="${0}" .extraComponents="${0}" click-label-for-more-info -click="${0}" -hidden="${0}" -unhidden="${0}" -label-click="${0}"></ha-chart-base> </div> </ha-card> `),this._config.title?this._config.title:n.s6,e.length>1?(0,n.qy)(w||(w=T` <ha-icon-button .path="${0}" .label="${0}" ="${0}"></ha-icon-button> `),"pie"===this._chartType?V:D,this.hass.localize("ui.panel.lovelace.cards.energy.energy_devices_graph.change_chart_type"),this._handleChartTypeChange):n.s6,(0,r.H)({"has-header":!!this._config.title}),this.hass,this._chartData,this._createOptions(this._chartData,this._chartType,this._legendData),`${Math.max(e.includes("pie")?300:100,28*((null===(t=this._legendData)||void 0===t?void 0:t.length)||0)+50)}px`,[h.a],this._handleChartClick,this._datasetHidden,this._datasetUnhidden,this._handleLegendLabelClick)}_getDeviceName(t){var e,i;const s=this._compoundStats.includes(t)?` (${this.hass.localize("ui.panel.lovelace.cards.energy.energy_devices_graph.untracked")})`:"";return((null===(e=this._data)||void 0===e||null===(e=e.prefs.device_consumption.find(e=>e.stat_consumption===t))||void 0===e?void 0:e.name)||(0,_.$O)(this.hass,t,null===(i=this._data)||void 0===i?void 0:i.statsMetadata[t]))+s}async _getStatistics(t){var e;const i=t.stats,s=t.statsCompare,a=[],n=[],o=[{type:this._chartType,radius:[s?"50%":"40%","70%"],universalTransition:!0,name:this.hass.localize("ui.panel.lovelace.cards.energy.energy_devices_graph.energy_usage"),itemStyle:{borderRadius:"bar"===this._chartType?[0,4,4,0]:4},data:a,barWidth:s?10:20,cursor:"default",minShowLabelAngle:15,label:"pie"===this._chartType?{formatter:({name:t})=>this._getDeviceName(t),overflow:"break",alignTo:this._isMobile?"edge":"none",edgeDistance:1}:void 0,labelLine:{length2:10}}];s&&o.push({type:this._chartType,radius:["30%","50%"],universalTransition:!0,name:this.hass.localize("ui.panel.lovelace.cards.energy.energy_devices_graph.previous_energy_usage"),itemStyle:{borderRadius:"bar"===this._chartType?[0,4,4,0]:4},data:n,barWidth:10,cursor:"default",label:"pie"===this._chartType?{show:!1}:void 0,emphasis:"pie"===this._chartType?{focus:"series",blurScope:"global"}:void 0});const r=getComputedStyle(this);this._compoundStats=t.prefs.device_consumption.map(t=>t.included_in_stat).filter(Boolean);const c=t.prefs.device_consumption,h={};c.forEach(t=>{h[t.stat_consumption]=t.stat_consumption in i&&(0,_.$j)(i[t.stat_consumption])||0});const u={};if(s&&c.forEach(t=>{u[t.stat_consumption]=t.stat_consumption in s&&(0,_.$j)(s[t.stat_consumption])||0}),c.forEach((t,e)=>{var i;let o=h[t.stat_consumption];if(null!==(i=this._config)&&void 0!==i&&i.hide_compound_stats){if(this._compoundStats.includes(t.stat_consumption))return}else{const e=c.reduce((e,i)=>i.included_in_stat===t.stat_consumption?e+h[i.stat_consumption]:e,0);o-=Math.min(o,e)}const l=(0,d.fI)(e,r);if(a.push({id:t.stat_consumption,value:[o,t.stat_consumption],name:t.stat_consumption,itemStyle:{color:l+"7F",borderColor:l}}),s){let e=t.stat_consumption in s&&(0,_.$j)(s[t.stat_consumption])||0;const i=c.reduce((e,i)=>i.included_in_stat===t.stat_consumption?e+u[i.stat_consumption]:e,0);e-=Math.min(e,i),n.push({id:t.stat_consumption,value:[e,t.stat_consumption],name:t.stat_consumption,itemStyle:{color:l+"32",borderColor:l+"7F"}})}}),"pie"===this._chartType){const e=a,{summedData:i,compareSummedData:c}=(0,p.gv)(t),{consumption:h,compareConsumption:d}=(0,p.DR)(i,c),u=h.total.used_total,_="from_grid"in i||"solar"in i||"from_battery"in i?u-e.reduce((t,e)=>t+e.value[0],0):0;if(_>0){const t=(0,C.g)(r,this.hass.themes.darkMode,!1,!1,"--history-unknown-color");if(e.push({id:"untracked",value:[_,"untracked"],name:this.hass.localize("ui.panel.lovelace.cards.energy.energy_devices_graph.untracked_consumption"),itemStyle:{color:t+"7F",borderColor:t}}),s){const e=d.total.used_total-n.reduce((t,e)=>t+e.value[0],0);e>0&&n.push({id:"untracked",value:[e,"untracked"],name:this.hass.localize("ui.panel.lovelace.cards.energy.energy_devices_graph.untracked_consumption"),itemStyle:{color:t+"32",borderColor:t+"7F"}})}}const g=e.reduce((t,e)=>this._hiddenStats.includes(e.id)?t:t+e.value[0],0);o.push({type:"pie",radius:["0%",s?"30%":"40%"],name:this.hass.localize("ui.panel.lovelace.cards.energy.energy_devices_graph.total_energy_usage"),data:[g],label:{show:!0,position:"center",color:r.getPropertyValue("--secondary-text-color"),fontSize:r.getPropertyValue("--ha-font-size-m"),lineHeight:24,fontWeight:"bold",formatter:`{a}\n${(0,l.ZV)(g,this.hass.locale)} kWh`},cursor:"default",itemStyle:{color:"rgba(0, 0, 0, 0)"},tooltip:{show:!1}})}a.sort((t,e)=>e.value[0]-t.value[0]),null!==(e=this._config)&&void 0!==e&&e.max_devices&&a.length>this._config.max_devices&&a.splice(this._config.max_devices),this._legendData=a.map(t=>{const e=t.id;return Object.assign(Object.assign({},t),{},{name:this._getDeviceName(t.name),value:`${(0,l.ZV)(t.value[0],this.hass.locale)} kWh`,noLabelClick:"untracked"===e||(0,_.OQ)(e)||!(e in this.hass.states)})});for(let d=a.length-1;d>=0;d--)this._hiddenStats.includes(a[d].id)&&a.splice(d,1);s&&(o[1].data=a.map(t=>n.find(e=>e.id===t.id))),this._chartData=o,await this.updateComplete}_handleChartClick(t){var e;if("axisLabel"===t.detail.targetType&&t.detail.value&&!(0,_.OQ)(t.detail.value))(0,v.r)(this,"hass-more-info",{entityId:t.detail.value});else if("pie"===t.detail.seriesType&&"tspan"===(null===(e=t.detail.event)||void 0===e||null===(e=e.target)||void 0===e?void 0:e.type)){const e=t.detail.data.id;"untracked"!==e&&!(0,_.OQ)(e)&&this.hass.states[e]&&(0,v.r)(this,"hass-more-info",{entityId:e})}}_handleLegendLabelClick(t){const e=t.detail.id;!(0,_.OQ)(e)&&this.hass.states[e]&&(0,v.r)(this,"hass-more-info",{entityId:e})}_handleChartTypeChange(){if(!this._chartType)return;const t=this._getAllowedModes(),e=(t.indexOf(this._chartType)+1)%t.length;this._chartType=t[e],this._getStatistics(this._data)}_datasetHidden(t){this._hiddenStats=[...this._hiddenStats,t.detail.id],this._getStatistics(this._data)}_datasetUnhidden(t){this._hiddenStats=this._hiddenStats.filter(e=>e!==t.detail.id),this._getStatistics(this._data)}constructor(...t){super(...t),this._chartData=[],this._legendData=[],this._hiddenStats=[],this._isMobile=!1,this._compoundStats=[],this.hassSubscribeRequiredHostProps=["_config"],this._renderTooltip=t=>{var e;const i=this._getDeviceName(t.name),s=`${(0,l.ZV)(t.value[0],this.hass.locale,t.value<.1?{maximumFractionDigits:3}:void 0)} kWh ${t.percent?`(${t.percent} %)`:""}`;return(0,n.qy)($||($=T`<h4 style="text-align:center;margin:0">${0}</h4> <ha-chart-tooltip-marker .color="${0}"></ha-chart-tooltip-marker> ${0}: <div style="direction:ltr;display:inline">${0}</div>`),i,String(null!==(e=t.color)&&void 0!==e?e:""),t.seriesName,s)},this._createOptions=(0,c.A)((t,e,i)=>{const s={grid:{top:5,left:5,right:40,bottom:0,containLabel:!0},tooltip:{show:!0,formatter:this._renderTooltip},xAxis:{show:!1},yAxis:{show:!1},legend:{type:"custom",show:!1}};var a,n;"bar"===e?(s.xAxis={show:!0,type:"value",name:"kWh",axisPointer:{show:!1}},s.yAxis={show:!0,type:"category",inverse:!0,triggerEvent:!0,data:null===(a=t[0])||void 0===a||null===(a=a.data)||void 0===a?void 0:a.map(t=>t.name),axisLabel:{formatter:this._getDeviceName.bind(this),overflow:"truncate",fontSize:12,margin:5,width:Math.min(this._isMobile?100:200,Math.max(...(null===(n=t[0])||void 0===n||null===(n=n.data)||void 0===n?void 0:n.map(t=>(0,y.W)(this._getDeviceName(t.name),12)+5))||[]))}}):s.legend={type:"custom",show:!0,data:i,selected:i.filter(t=>t.id&&this._hiddenStats.includes(t.id)).reduce((t,e)=>(t[e.id]=!1,t),{})};return s})}}H.styles=(0,n.AH)(M||(M=T`.card-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:0}.content{padding:16px}.has-header{padding-top:0}ha-chart-base{--chart-max-height:none}ha-icon-button{transform:rotate(90deg);color:var(--secondary-text-color);cursor:pointer}`)),(0,a.Cg)([(0,o.MZ)({attribute:!1})],H.prototype,"hass",void 0),(0,a.Cg)([(0,o.wk)()],H.prototype,"_config",void 0),(0,a.Cg)([(0,o.wk)()],H.prototype,"_chartData",void 0),(0,a.Cg)([(0,o.wk)()],H.prototype,"_data",void 0),(0,a.Cg)([(0,o.wk)()],H.prototype,"_legendData",void 0),(0,a.Cg)([(0,o.wk)(),(0,b.I)({key:"energy-devices-graph-chart-type",state:!0,subscribe:!1})],H.prototype,"_chartType",void 0),(0,a.Cg)([(0,o.wk)(),(0,b.I)({key:"energy-devices-pie-hidden-stats",state:!0,subscribe:!1})],H.prototype,"_hiddenStats",void 0),(0,a.Cg)([(0,o.wk)()],H.prototype,"_isMobile",void 0),H=(0,a.Cg)([(0,o.EM)("hui-energy-devices-graph-card")],H),s()}catch(x){s(x)}})},3461:function(t,e,i){let s;function a(t,e,i="Roboto, Noto, sans-serif"){s||(s=document.createElement("canvas"));const a=s.getContext("2d");if(!a)return 0;a.font=`${e}px ${i}`;const n=a.measureText(t);return Math.ceil(Math.max(n.actualBoundingBoxRight+n.actualBoundingBoxLeft,n.width))}i.d(e,{W:function(){return a}})}}]);