From 0792a21b747a7b8652443d9606756c2ad3e77200 Mon Sep 17 00:00:00 2001 From: tempus2016 Date: Thu, 29 Oct 2026 09:19:02 +0000 Subject: [PATCH] feat: column chart of totals per hour, day, week or month A new history style, `column`: vertical columns over time, for energy used per day, rain per hour or hours of heating per day. It uses the shared history frame, so periods, previous/next, statistics, axes, the tooltip and the compact layout all work as on the line chart. It is set up to be right with no options. With no period it shows the last 7 days; with no `group_by` it picks a grouping for the span (hours up to two days, days up to two months, then weeks, then months; today by hour, a week or month by day, a year by month); and with no `aggregate` it shows how much a meter went up (`change`) when every entity is a meter (`state_class` total or total_increasing), else the average. So an energy meter on its own draws a column of kWh per day. `group_by: none` draws one column per reading. - Rounded outer ends (`rounded`, on by default). Columns are drawn as HTML over the plot rather than in its stretched SVG, so corners stay round. - `labels` puts each column's value on top (a stack's total), and hides them when the columns are too narrow to fit them. - `stack: normal` piles series up; `stack: percent` scales each column to 100 %. Positive values stack up from zero, negative ones down. - Negative values hang below zero, and the axis always includes zero. - `color_by: bands` colours each column by its value's colour band. - `range: true` draws each column from the group's lowest to its highest, with the average marked across it. From statistics it asks the recorder for min and max; from history it takes the spread of the values held in each group. The shared history frame gained an opt-in for this, so other charts are unchanged. - Several entities sit side by side in each group. - An entity's `target` (from the Limits section) is marked across each of its columns. - When grouped, the time axis puts one label under each set of columns (Mon, Tue... or 26 Oct, Oct, Nov), every second or third when they would not fit, and the tooltip names the whole group ("26 Oct - 1 Nov") and highlights it. Editor: Chart section has the period (7 days by default), Group readings by (with Automatic and Don't group), Combine with, Stack, Colour, Range, Show values on the columns and Rounded tops, then axes and layout. Each entity gets its own Colour. Closes #11 --- dist/chartdeck-card.js | 650 +++++++++++++++++++++++------------------ src/chart/columns.ts | 152 ++++++++++ src/chart/frame.ts | 16 +- src/chart/grid.ts | 4 +- src/history/group.ts | 45 ++- src/styles/column.ts | 564 +++++++++++++++++++++++++++++++++++ src/styles/index.ts | 2 + src/types.ts | 15 +- test/column.test.ts | 303 +++++++++++++++++++ 9 files changed, 1460 insertions(+), 291 deletions(-) create mode 100644 src/chart/columns.ts create mode 100644 src/styles/column.ts create mode 100644 test/column.test.ts diff --git a/dist/chartdeck-card.js b/dist/chartdeck-card.js index 5721369..dc4193f 100644 --- a/dist/chartdeck-card.js +++ b/dist/chartdeck-card.js @@ -3,88 +3,88 @@ * Copyright 2019 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ -const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,i=Symbol(),n=new WeakMap;let o=class{constructor(t,e,n){if(this._$cssResult$=!0,n!==i)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const i=this.t;if(e&&void 0===t){const e=void 0!==i&&1===i.length;e&&(t=n.get(i)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&n.set(i,t))}return t}toString(){return this.cssText}};const r=(t,...e)=>{const n=1===t.length?t[0]:e.reduce((e,i,n)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(i)+t[n+1],t[0]);return new o(n,t,i)},a=e?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const i of t.cssRules)e+=i.cssText;return(t=>new o("string"==typeof t?t:t+"",void 0,i))(e)})(t):t,{is:s,defineProperty:l,getOwnPropertyDescriptor:c,getOwnPropertyNames:d,getOwnPropertySymbols:h,getPrototypeOf:u}=Object,p=globalThis,m=p.trustedTypes,f=m?m.emptyScript:"",g=p.reactiveElementPolyfillSupport,_=(t,e)=>t,y={toAttribute(t,e){switch(e){case Boolean:t=t?f:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let i=t;switch(e){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t)}catch(t){i=null}}return i}},v=(t,e)=>!s(t,e),b={attribute:!0,type:String,converter:y,reflect:!1,useDefault:!1,hasChanged:v}; +const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,n=Symbol(),o=new WeakMap;let i=class{constructor(t,e,o){if(this._$cssResult$=!0,o!==n)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const n=this.t;if(e&&void 0===t){const e=void 0!==n&&1===n.length;e&&(t=o.get(n)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o.set(n,t))}return t}toString(){return this.cssText}};const r=(t,...e)=>{const o=1===t.length?t[0]:e.reduce((e,n,o)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(n)+t[o+1],t[0]);return new i(o,t,n)},a=e?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const n of t.cssRules)e+=n.cssText;return(t=>new i("string"==typeof t?t:t+"",void 0,n))(e)})(t):t,{is:s,defineProperty:l,getOwnPropertyDescriptor:c,getOwnPropertyNames:d,getOwnPropertySymbols:h,getPrototypeOf:u}=Object,p=globalThis,m=p.trustedTypes,f=m?m.emptyScript:"",g=p.reactiveElementPolyfillSupport,y=(t,e)=>t,_={toAttribute(t,e){switch(e){case Boolean:t=t?f:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let n=t;switch(e){case Boolean:n=null!==t;break;case Number:n=null===t?null:Number(t);break;case Object:case Array:try{n=JSON.parse(t)}catch(t){n=null}}return n}},v=(t,e)=>!s(t,e),b={attribute:!0,type:String,converter:_,reflect:!1,useDefault:!1,hasChanged:v}; /** * @license * Copyright 2017 Google LLC * SPDX-License-Identifier: BSD-3-Clause - */Symbol.metadata??=Symbol("metadata"),p.litPropertyMetadata??=new WeakMap;let $=class extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=b){if(e.state&&(e.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(t,e),!e.noAccessor){const i=Symbol(),n=this.getPropertyDescriptor(t,i,e);void 0!==n&&l(this.prototype,t,n)}}static getPropertyDescriptor(t,e,i){const{get:n,set:o}=c(this.prototype,t)??{get(){return this[e]},set(t){this[e]=t}};return{get:n,set(e){const r=n?.call(this);o?.call(this,e),this.requestUpdate(t,r,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??b}static _$Ei(){if(this.hasOwnProperty(_("elementProperties")))return;const t=u(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(_("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(_("properties"))){const t=this.properties,e=[...d(t),...h(t)];for(const i of e)this.createProperty(i,t[i])}const t=this[Symbol.metadata];if(null!==t){const e=litPropertyMetadata.get(t);if(void 0!==e)for(const[t,i]of e)this.elementProperties.set(t,i)}this._$Eh=new Map;for(const[e,i]of this.elementProperties){const t=this._$Eu(e,i);void 0!==t&&this._$Eh.set(t,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const i=new Set(t.flat(1/0).reverse());for(const t of i)e.unshift(a(t))}else void 0!==t&&e.push(a(t));return e}static _$Eu(t,e){const i=e.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise(t=>this.enableUpdating=t),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(t=>t(this))}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.()}removeController(t){this._$EO?.delete(t)}_$E_(){const t=new Map,e=this.constructor.elementProperties;for(const i of e.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const i=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return((i,n)=>{if(e)i.adoptedStyleSheets=n.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const e of n){const n=document.createElement("style"),o=t.litNonce;void 0!==o&&n.setAttribute("nonce",o),n.textContent=e.cssText,i.appendChild(n)}})(i,this.constructor.elementStyles),i}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach(t=>t.hostConnected?.())}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach(t=>t.hostDisconnected?.())}attributeChangedCallback(t,e,i){this._$AK(t,i)}_$ET(t,e){const i=this.constructor.elementProperties.get(t),n=this.constructor._$Eu(t,i);if(void 0!==n&&!0===i.reflect){const o=(void 0!==i.converter?.toAttribute?i.converter:y).toAttribute(e,i.type);this._$Em=t,null==o?this.removeAttribute(n):this.setAttribute(n,o),this._$Em=null}}_$AK(t,e){const i=this.constructor,n=i._$Eh.get(t);if(void 0!==n&&this._$Em!==n){const t=i.getPropertyOptions(n),o="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:y;this._$Em=n;const r=o.fromAttribute(e,t.type);this[n]=r??this._$Ej?.get(n)??r,this._$Em=null}}requestUpdate(t,e,i,n=!1,o){if(void 0!==t){const r=this.constructor;if(!1===n&&(o=this[t]),i??=r.getPropertyOptions(t),!((i.hasChanged??v)(o,e)||i.useDefault&&i.reflect&&o===this._$Ej?.get(t)&&!this.hasAttribute(r._$Eu(t,i))))return;this.C(t,e,i)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(t,e,{useDefault:i,reflect:n,wrapped:o},r){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,r??e??this[t]),!0!==o||void 0!==r)||(this._$AL.has(t)||(this.hasUpdated||i||(e=void 0),this._$AL.set(t,e)),!0===n&&this._$Em!==t&&(this._$Eq??=new Set).add(t))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,e]of this._$Ep)this[t]=e;this._$Ep=void 0}const t=this.constructor.elementProperties;if(t.size>0)for(const[e,i]of t){const{wrapped:t}=i,n=this[e];!0!==t||this._$AL.has(e)||void 0===n||this.C(e,void 0,i,n)}}let t=!1;const e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),this._$EO?.forEach(t=>t.hostUpdate?.()),this.update(e)):this._$EM()}catch(e){throw t=!1,this._$EM(),e}t&&this._$AE(e)}willUpdate(t){}_$AE(t){this._$EO?.forEach(t=>t.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Eq&&=this._$Eq.forEach(t=>this._$ET(t,this[t])),this._$EM()}updated(t){}firstUpdated(t){}};$.elementStyles=[],$.shadowRootOptions={mode:"open"},$[_("elementProperties")]=new Map,$[_("finalized")]=new Map,g?.({ReactiveElement:$}),(p.reactiveElementVersions??=[]).push("2.1.2"); + */Symbol.metadata??=Symbol("metadata"),p.litPropertyMetadata??=new WeakMap;let $=class extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=b){if(e.state&&(e.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(t,e),!e.noAccessor){const n=Symbol(),o=this.getPropertyDescriptor(t,n,e);void 0!==o&&l(this.prototype,t,o)}}static getPropertyDescriptor(t,e,n){const{get:o,set:i}=c(this.prototype,t)??{get(){return this[e]},set(t){this[e]=t}};return{get:o,set(e){const r=o?.call(this);i?.call(this,e),this.requestUpdate(t,r,n)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??b}static _$Ei(){if(this.hasOwnProperty(y("elementProperties")))return;const t=u(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(y("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(y("properties"))){const t=this.properties,e=[...d(t),...h(t)];for(const n of e)this.createProperty(n,t[n])}const t=this[Symbol.metadata];if(null!==t){const e=litPropertyMetadata.get(t);if(void 0!==e)for(const[t,n]of e)this.elementProperties.set(t,n)}this._$Eh=new Map;for(const[e,n]of this.elementProperties){const t=this._$Eu(e,n);void 0!==t&&this._$Eh.set(t,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const n=new Set(t.flat(1/0).reverse());for(const t of n)e.unshift(a(t))}else void 0!==t&&e.push(a(t));return e}static _$Eu(t,e){const n=e.attribute;return!1===n?void 0:"string"==typeof n?n:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise(t=>this.enableUpdating=t),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(t=>t(this))}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.()}removeController(t){this._$EO?.delete(t)}_$E_(){const t=new Map,e=this.constructor.elementProperties;for(const n of e.keys())this.hasOwnProperty(n)&&(t.set(n,this[n]),delete this[n]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const n=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return((n,o)=>{if(e)n.adoptedStyleSheets=o.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const e of o){const o=document.createElement("style"),i=t.litNonce;void 0!==i&&o.setAttribute("nonce",i),o.textContent=e.cssText,n.appendChild(o)}})(n,this.constructor.elementStyles),n}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach(t=>t.hostConnected?.())}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach(t=>t.hostDisconnected?.())}attributeChangedCallback(t,e,n){this._$AK(t,n)}_$ET(t,e){const n=this.constructor.elementProperties.get(t),o=this.constructor._$Eu(t,n);if(void 0!==o&&!0===n.reflect){const i=(void 0!==n.converter?.toAttribute?n.converter:_).toAttribute(e,n.type);this._$Em=t,null==i?this.removeAttribute(o):this.setAttribute(o,i),this._$Em=null}}_$AK(t,e){const n=this.constructor,o=n._$Eh.get(t);if(void 0!==o&&this._$Em!==o){const t=n.getPropertyOptions(o),i="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:_;this._$Em=o;const r=i.fromAttribute(e,t.type);this[o]=r??this._$Ej?.get(o)??r,this._$Em=null}}requestUpdate(t,e,n,o=!1,i){if(void 0!==t){const r=this.constructor;if(!1===o&&(i=this[t]),n??=r.getPropertyOptions(t),!((n.hasChanged??v)(i,e)||n.useDefault&&n.reflect&&i===this._$Ej?.get(t)&&!this.hasAttribute(r._$Eu(t,n))))return;this.C(t,e,n)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(t,e,{useDefault:n,reflect:o,wrapped:i},r){n&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,r??e??this[t]),!0!==i||void 0!==r)||(this._$AL.has(t)||(this.hasUpdated||n||(e=void 0),this._$AL.set(t,e)),!0===o&&this._$Em!==t&&(this._$Eq??=new Set).add(t))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,e]of this._$Ep)this[t]=e;this._$Ep=void 0}const t=this.constructor.elementProperties;if(t.size>0)for(const[e,n]of t){const{wrapped:t}=n,o=this[e];!0!==t||this._$AL.has(e)||void 0===o||this.C(e,void 0,n,o)}}let t=!1;const e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),this._$EO?.forEach(t=>t.hostUpdate?.()),this.update(e)):this._$EM()}catch(e){throw t=!1,this._$EM(),e}t&&this._$AE(e)}willUpdate(t){}_$AE(t){this._$EO?.forEach(t=>t.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Eq&&=this._$Eq.forEach(t=>this._$ET(t,this[t])),this._$EM()}updated(t){}firstUpdated(t){}};$.elementStyles=[],$.shadowRootOptions={mode:"open"},$[y("elementProperties")]=new Map,$[y("finalized")]=new Map,g?.({ReactiveElement:$}),(p.reactiveElementVersions??=[]).push("2.1.2"); /** * @license * Copyright 2017 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ -const x=globalThis,w=t=>t,k=x.trustedTypes,A=k?k.createPolicy("lit-html",{createHTML:t=>t}):void 0,M="$lit$",C=`lit$${Math.random().toFixed(9).slice(2)}$`,S="?"+C,E=`<${S}>`,O=document,T=()=>O.createComment(""),L=t=>null===t||"object"!=typeof t&&"function"!=typeof t,N=Array.isArray,U="[ \t\n\f\r]",P=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,z=/-->/g,j=/>/g,H=RegExp(`>|${U}(?:([^\\s"'>=/]+)(${U}*=${U}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),F=/'/g,D=/"/g,R=/^(?:script|style|textarea|title)$/i,B=t=>(e,...i)=>({_$litType$:t,strings:e,values:i}),V=B(1),I=B(2),W=Symbol.for("lit-noChange"),q=Symbol.for("lit-nothing"),Z=new WeakMap,G=O.createTreeWalker(O,129);function Y(t,e){if(!N(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==A?A.createHTML(e):e}class X{constructor({strings:t,_$litType$:e},i){let n;this.parts=[];let o=0,r=0;const a=t.length-1,s=this.parts,[l,c]=((t,e)=>{const i=t.length-1,n=[];let o,r=2===e?"":3===e?"":"",a=P;for(let s=0;s"===l[0]?(a=o??P,c=-1):void 0===l[1]?c=-2:(c=a.lastIndex-l[2].length,i=l[1],a=void 0===l[3]?H:'"'===l[3]?D:F):a===D||a===F?a=H:a===z||a===j?a=P:(a=H,o=void 0);const h=a===H&&t[s+1].startsWith("/>")?" ":"";r+=a===P?e+E:c>=0?(n.push(i),e.slice(0,c)+M+e.slice(c)+C+h):e+C+(-2===c?s:h)}return[Y(t,r+(t[i]||"")+(2===e?"":3===e?"":"")),n]})(t,e);if(this.el=X.createElement(l,i),G.currentNode=this.el.content,2===e||3===e){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes)}for(;null!==(n=G.nextNode())&&s.length0){n.textContent=k?k.emptyScript:"";for(let i=0;iN(t)||"function"==typeof t?.[Symbol.iterator])(t)?this.k(t):this._(t)}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t))}_(t){this._$AH!==q&&L(this._$AH)?this._$AA.nextSibling.data=t:this.T(O.createTextNode(t)),this._$AH=t}$(t){const{values:e,_$litType$:i}=t,n="number"==typeof i?this._$AC(t):(void 0===i.el&&(i.el=X.createElement(Y(i.h,i.h[0]),this.options)),i);if(this._$AH?._$AD===n)this._$AH.p(e);else{const t=new K(n,this),i=t.u(this.options);t.p(e),this.T(i),this._$AH=t}}_$AC(t){let e=Z.get(t.strings);return void 0===e&&Z.set(t.strings,e=new X(t)),e}k(t){N(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let i,n=0;for(const o of t)n===e.length?e.push(i=new Q(this.O(T()),this.O(T()),this,this.options)):i=e[n],i._$AI(o),n++;n2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=q}_$AI(t,e=this,i,n){const o=this.strings;let r=!1;if(void 0===o)t=J(this,t,e,0),r=!L(t)||t!==this._$AH&&t!==W,r&&(this._$AH=t);else{const n=t;let a,s;for(t=o[0],a=0;at,k=x.trustedTypes,M=k?k.createPolicy("lit-html",{createHTML:t=>t}):void 0,A="$lit$",C=`lit$${Math.random().toFixed(9).slice(2)}$`,S="?"+C,E=`<${S}>`,O=document,T=()=>O.createComment(""),L=t=>null===t||"object"!=typeof t&&"function"!=typeof t,N=Array.isArray,U="[ \t\n\f\r]",j=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,z=/-->/g,P=/>/g,H=RegExp(`>|${U}(?:([^\\s"'>=/]+)(${U}*=${U}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),F=/'/g,D=/"/g,R=/^(?:script|style|textarea|title)$/i,V=t=>(e,...n)=>({_$litType$:t,strings:e,values:n}),B=V(1),I=V(2),W=Symbol.for("lit-noChange"),Z=Symbol.for("lit-nothing"),q=new WeakMap,Y=O.createTreeWalker(O,129);function G(t,e){if(!N(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==M?M.createHTML(e):e}class X{constructor({strings:t,_$litType$:e},n){let o;this.parts=[];let i=0,r=0;const a=t.length-1,s=this.parts,[l,c]=((t,e)=>{const n=t.length-1,o=[];let i,r=2===e?"":3===e?"":"",a=j;for(let s=0;s"===l[0]?(a=i??j,c=-1):void 0===l[1]?c=-2:(c=a.lastIndex-l[2].length,n=l[1],a=void 0===l[3]?H:'"'===l[3]?D:F):a===D||a===F?a=H:a===z||a===P?a=j:(a=H,i=void 0);const h=a===H&&t[s+1].startsWith("/>")?" ":"";r+=a===j?e+E:c>=0?(o.push(n),e.slice(0,c)+A+e.slice(c)+C+h):e+C+(-2===c?s:h)}return[G(t,r+(t[n]||"")+(2===e?"":3===e?"":"")),o]})(t,e);if(this.el=X.createElement(l,n),Y.currentNode=this.el.content,2===e||3===e){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes)}for(;null!==(o=Y.nextNode())&&s.length0){o.textContent=k?k.emptyScript:"";for(let n=0;nN(t)||"function"==typeof t?.[Symbol.iterator])(t)?this.k(t):this._(t)}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t))}_(t){this._$AH!==Z&&L(this._$AH)?this._$AA.nextSibling.data=t:this.T(O.createTextNode(t)),this._$AH=t}$(t){const{values:e,_$litType$:n}=t,o="number"==typeof n?this._$AC(t):(void 0===n.el&&(n.el=X.createElement(G(n.h,n.h[0]),this.options)),n);if(this._$AH?._$AD===o)this._$AH.p(e);else{const t=new K(o,this),n=t.u(this.options);t.p(e),this.T(n),this._$AH=t}}_$AC(t){let e=q.get(t.strings);return void 0===e&&q.set(t.strings,e=new X(t)),e}k(t){N(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let n,o=0;for(const i of t)o===e.length?e.push(n=new Q(this.O(T()),this.O(T()),this,this.options)):n=e[o],n._$AI(i),o++;o2||""!==n[0]||""!==n[1]?(this._$AH=Array(n.length-1).fill(new String),this.strings=n):this._$AH=Z}_$AI(t,e=this,n,o){const i=this.strings;let r=!1;if(void 0===i)t=J(this,t,e,0),r=!L(t)||t!==this._$AH&&t!==W,r&&(this._$AH=t);else{const o=t;let a,s;for(t=i[0],a=0;a{const n=i?.renderBefore??e;let o=n._$litPart$;if(void 0===o){const t=i?.renderBefore??null;n._$litPart$=o=new Q(e.insertBefore(T(),t),t,void 0,i??{})}return o._$AI(t),o})(e,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return W}};lt._$litElement$=!0,lt.finalized=!0,st.litElementHydrateSupport?.({LitElement:lt});const ct=st.litElementPolyfillSupport;ct?.({LitElement:lt}),(st.litElementVersions??=[]).push("4.2.2"); + */let lt=class extends ${constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=((t,e,n)=>{const o=n?.renderBefore??e;let i=o._$litPart$;if(void 0===i){const t=n?.renderBefore??null;o._$litPart$=i=new Q(e.insertBefore(T(),t),t,void 0,n??{})}return i._$AI(t),i})(e,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return W}};lt._$litElement$=!0,lt.finalized=!0,st.litElementHydrateSupport?.({LitElement:lt});const ct=st.litElementPolyfillSupport;ct?.({LitElement:lt}),(st.litElementVersions??=[]).push("4.2.2"); /** * @license * Copyright 2017 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ -const dt=1,ht=2,ut=3,pt=4,mt=t=>(...e)=>({_$litDirective$:t,values:e});let ft=class{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}; +const dt=1,ht=2,ut=3,pt=4,mt=t=>(...e)=>({_$litDirective$:t,values:e});let ft=class{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,n){this._$Ct=t,this._$AM=e,this._$Ci=n}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}; /** * @license * Copyright 2020 Google LLC * SPDX-License-Identifier: BSD-3-Clause - */const{I:gt}=rt,_t=t=>t,yt=()=>document.createComment(""),vt=(t,e,i)=>{const n=t._$AA.parentNode,o=void 0===e?t._$AB:e._$AA;if(void 0===i){const e=n.insertBefore(yt(),o),r=n.insertBefore(yt(),o);i=new gt(e,r,t,t.options)}else{const e=i._$AB.nextSibling,r=i._$AM,a=r!==t;if(a){let e;i._$AQ?.(t),i._$AM=t,void 0!==i._$AP&&(e=t._$AU)!==r._$AU&&i._$AP(e)}if(e!==o||a){let t=i._$AA;for(;t!==e;){const e=_t(t).nextSibling;_t(n).insertBefore(t,o),t=e}}}return i},bt=(t,e,i=t)=>(t._$AI(e,i),t),$t={},xt=(t,e=$t)=>t._$AH=e,wt=t=>{t._$AR(),t._$AA.remove()},kt=(t,e,i)=>{const n=new Map;for(let o=e;o<=i;o++)n.set(t[o],o);return n},At=mt(class extends ft{constructor(t){if(super(t),t.type!==ht)throw Error("repeat() can only be used in text expressions")}dt(t,e,i){let n;void 0===i?i=e:void 0!==e&&(n=e);const o=[],r=[];let a=0;for(const s of t)o[a]=n?n(s,a):a,r[a]=i(s,a),a++;return{values:r,keys:o}}render(t,e,i){return this.dt(t,e,i).values}update(t,[e,i,n]){const o=(t=>t._$AH)(t),{values:r,keys:a}=this.dt(e,i,n);if(!Array.isArray(o))return this.ut=a,r;const s=this.ut??=[],l=[];let c,d,h=0,u=o.length-1,p=0,m=r.length-1;for(;h<=u&&p<=m;)if(null===o[h])h++;else if(null===o[u])u--;else if(s[h]===a[p])l[p]=bt(o[h],r[p]),h++,p++;else if(s[u]===a[m])l[m]=bt(o[u],r[m]),u--,m--;else if(s[h]===a[m])l[m]=bt(o[h],r[m]),vt(t,l[m+1],o[h]),h++,m--;else if(s[u]===a[p])l[p]=bt(o[u],r[p]),vt(t,o[h],o[u]),u--,p++;else if(void 0===c&&(c=kt(a,p,m),d=kt(s,h,u)),c.has(s[h]))if(c.has(s[u])){const e=d.get(a[p]),i=void 0!==e?o[e]:null;if(null===i){const e=vt(t,o[h]);bt(e,r[p]),l[p]=e}else l[p]=bt(i,r[p]),vt(t,o[h],i),o[e]=null;p++}else wt(o[u]),u--;else wt(o[h]),h++;for(;p<=m;){const e=vt(t,l[m+1]);bt(e,r[p]),l[p++]=e}for(;h<=u;){const t=o[h++];null!==t&&wt(t)}return this.ut=a,xt(t,l),W}}),Mt=t=>!!t&&"none"!==t.action; + */const{I:gt}=rt,yt=t=>t,_t=()=>document.createComment(""),vt=(t,e,n)=>{const o=t._$AA.parentNode,i=void 0===e?t._$AB:e._$AA;if(void 0===n){const e=o.insertBefore(_t(),i),r=o.insertBefore(_t(),i);n=new gt(e,r,t,t.options)}else{const e=n._$AB.nextSibling,r=n._$AM,a=r!==t;if(a){let e;n._$AQ?.(t),n._$AM=t,void 0!==n._$AP&&(e=t._$AU)!==r._$AU&&n._$AP(e)}if(e!==i||a){let t=n._$AA;for(;t!==e;){const e=yt(t).nextSibling;yt(o).insertBefore(t,i),t=e}}}return n},bt=(t,e,n=t)=>(t._$AI(e,n),t),$t={},xt=(t,e=$t)=>t._$AH=e,wt=t=>{t._$AR(),t._$AA.remove()},kt=(t,e,n)=>{const o=new Map;for(let i=e;i<=n;i++)o.set(t[i],i);return o},Mt=mt(class extends ft{constructor(t){if(super(t),t.type!==ht)throw Error("repeat() can only be used in text expressions")}dt(t,e,n){let o;void 0===n?n=e:void 0!==e&&(o=e);const i=[],r=[];let a=0;for(const s of t)i[a]=o?o(s,a):a,r[a]=n(s,a),a++;return{values:r,keys:i}}render(t,e,n){return this.dt(t,e,n).values}update(t,[e,n,o]){const i=(t=>t._$AH)(t),{values:r,keys:a}=this.dt(e,n,o);if(!Array.isArray(i))return this.ut=a,r;const s=this.ut??=[],l=[];let c,d,h=0,u=i.length-1,p=0,m=r.length-1;for(;h<=u&&p<=m;)if(null===i[h])h++;else if(null===i[u])u--;else if(s[h]===a[p])l[p]=bt(i[h],r[p]),h++,p++;else if(s[u]===a[m])l[m]=bt(i[u],r[m]),u--,m--;else if(s[h]===a[m])l[m]=bt(i[h],r[m]),vt(t,l[m+1],i[h]),h++,m--;else if(s[u]===a[p])l[p]=bt(i[u],r[p]),vt(t,i[h],i[u]),u--,p++;else if(void 0===c&&(c=kt(a,p,m),d=kt(s,h,u)),c.has(s[h]))if(c.has(s[u])){const e=d.get(a[p]),n=void 0!==e?i[e]:null;if(null===n){const e=vt(t,i[h]);bt(e,r[p]),l[p]=e}else l[p]=bt(n,r[p]),vt(t,i[h],n),i[e]=null;p++}else wt(i[u]),u--;else wt(i[h]),h++;for(;p<=m;){const e=vt(t,l[m+1]);bt(e,r[p]),l[p++]=e}for(;h<=u;){const t=i[h++];null!==t&&wt(t)}return this.ut=a,xt(t,l),W}}),At=t=>!!t&&"none"!==t.action; /** * @license * Copyright 2017 Google LLC * SPDX-License-Identifier: BSD-3-Clause - */function Ct(t,e){let i,n,o=0,r=0,a=!1,s=!1;const l=i=>{const n=e(),o="tap"===i?n.tap_action:"hold"===i?n.hold_action:n.double_tap_action;Mt(o)&&t.dispatchEvent(new CustomEvent("hass-action",{bubbles:!0,composed:!0,detail:{config:n,action:i}}))},c=()=>{void 0!==i&&clearTimeout(i),i=void 0},d=t=>{const n=t;n.button>0||(a=!0,s=!1,o=n.clientX,r=n.clientY,c(),Mt(e().hold_action)&&(i=setTimeout(()=>{i=void 0,s=!0,l("hold")},500)))},h=t=>{if(!a)return;const e=t;Math.hypot(e.clientX-o,e.clientY-r)>10&&(c(),a=!1)},u=()=>{c(),a=!1},p=()=>{const t=a;c(),a=!1,t&&!s?Mt(e().double_tap_action)?void 0!==n?(clearTimeout(n),n=void 0,l("double_tap")):n=setTimeout(()=>{n=void 0,l("tap")},250):l("tap"):s=!1},m=t=>{const e=t;e.repeat||"Enter"!==e.key&&" "!==e.key||(" "===e.key&&e.preventDefault(),l("tap"))},f=t=>{Mt(e().hold_action)&&t.preventDefault()};return t.addEventListener("pointerdown",d),t.addEventListener("pointermove",h),t.addEventListener("pointerup",p),t.addEventListener("pointercancel",u),t.addEventListener("pointerleave",u),t.addEventListener("keydown",m),t.addEventListener("contextmenu",f),()=>{c(),void 0!==n&&clearTimeout(n),n=void 0,t.removeEventListener("pointerdown",d),t.removeEventListener("pointermove",h),t.removeEventListener("pointerup",p),t.removeEventListener("pointercancel",u),t.removeEventListener("pointerleave",u),t.removeEventListener("keydown",m),t.removeEventListener("contextmenu",f)}}const St={primary:{variable:"--primary-color",fallback:"#2f6fe4"},green:{variable:"--success-color",fallback:"#1fae7a"},amber:{variable:"--warning-color",fallback:"#f59e0b"},red:{variable:"--error-color",fallback:"#ef3b5a"},blue:{variable:"--info-color",fallback:"#2f6fe4"},purple:{variable:"--purple-color",fallback:"#8b6cff"},grey:{variable:"--grey-color",fallback:"#8e919a"}};function Et(t){if(Object.prototype.hasOwnProperty.call(St,t)){const{variable:e,fallback:i}=St[t];return`var(${e}, ${i})`}return t}const Ot=new Set(["amber"]);function Tt(t){if(Object.prototype.hasOwnProperty.call(St,t))return Ot.has(t)?"dark":"light";const e=function(t){const e=t.trim().toLowerCase(),i=/^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/.exec(e);if(i){const t=i[1].length<=4?[...i[1]].map(t=>t+t).join(""):i[1],[e,n,o]=[0,2,4].map(e=>parseInt(t.slice(e,e+2),16));return[e,n,o,8===t.length?parseInt(t.slice(6,8),16)/255:1]}const n=/^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)\s*(?:[,/]\s*([\d.]+)(%?)\s*)?\)$/.exec(e);if(n){const[t,e,i]=[n[1],n[2],n[3]].map(t=>Math.min(255,Number(t))),o=void 0===n[4]?1:Number(n[4])/(n[5]?100:1);return[t,e,i,Math.min(1,o)]}}(t);return e?e[3]<.5?"theme":function([t,e,i]){const n=t=>{const e=t/255;return e<=.03928?e/12.92:((e+.055)/1.055)**2.4};return.2126*n(t)+.7152*n(e)+.0722*n(i)}([e[0],e[1],e[2]])>.4?"dark":"light":"light"}function Lt(t,e){let i=e[0];for(const n of e){if(!(n.from<=t))break;i=n}return i}const Nt={battery:[{from:0,color:"red",label:"Low"},{from:20,color:"amber"},{from:50,color:"green"}],usage:[{from:0,color:"green"},{from:60,color:"amber"},{from:85,color:"red",label:"High"}],temperature:[{from:-50,color:"blue",label:"Cold"},{from:16,color:"green"},{from:24,color:"amber"},{from:28,color:"red",label:"Hot"}],none:void 0},Ut=["label","area","floor","device_class","domain","entity"];function Pt(t,e){if(null==t)return;if("object"!=typeof t||Array.isArray(t))throw new Error(`"${e}" must list what to match, such as "area" or "device_class"`);const i="include"===e?Ut.filter(t=>"entity"!==t):Ut,n={};for(const[o,r]of Object.entries(t)){if(!i.includes(o))throw new Error(`"${e}" can't match on "${o}". Use: ${i.join(", ")}`);const t=(Array.isArray(r)?r:[r]).filter(t=>null!=t&&""!==t);if(t.some(t=>"string"!=typeof t))throw new Error(`"${e}.${o}" must be text or a list of text`);t.length&&(n[o]=t)}return Object.keys(n).length?n:void 0}function zt(t){const e=t.state;return"unavailable"===e||"unknown"===e||""!==e.trim()&&Number.isFinite(Number(e))}function jt(t,e){const i=t.entity_id,n=e.entities?.[i],o=n?.device_id?e.devices?.[n.device_id]:void 0,r=n?.area_id??o?.area_id??void 0,a=t.attributes?.device_class;return{label:[...n?.labels??[],...o?.labels??[]],area:r,floor:r?e.areas?.[r]?.floor_id??void 0:void 0,device_class:"string"==typeof a?a:void 0,domain:i.slice(0,i.indexOf(".")),entity:i}}function Ht(t,e,i){const n=t[e],o=i[e];return Array.isArray(o)?o.some(t=>n.includes(t)):void 0!==o&&n.includes(o)}function Ft(t,e){return Object.keys(t).every(i=>Ht(t,i,e))}function Dt(t,e){return!!t&&Object.keys(t).some(i=>Ht(t,i,e))}const Rt=new WeakMap;const Bt=["bar","thin","segmented","tank","ring","needle","arc","line","area"],Vt=[{from:-1/0,color:"primary"}],It=["none","ascending","descending"];function Wt(t){if("number"==typeof t)return Number.isFinite(t)?t:void 0;if("string"==typeof t&&""!==t.trim()){const e=Number(t);return Number.isFinite(e)?e:void 0}}function qt(t,e){if(null==t||""===t)return;const i=Wt(t);if(void 0!==i)return i;if("string"==typeof t)return t;throw new Error(`"${e}" must be a number or an entity id`)}function Zt(t,e,i,n=1/0){if(null==t||""===t)return;const o=Wt(t);if(void 0===o||!Number.isInteger(o)||on){throw new Error(`"${e}" must be a whole number ${n===1/0?`of at least ${i}`:`from ${i} to ${n}`}`)}return o}function Gt(t){if(null==t)return;if(!Array.isArray(t))throw new Error('"severity" must be a list of bands');if(0===t.length)return;const e=t.map((t,e)=>{let i;try{i=qt(t?.from,"from")}catch{i=void 0}if(void 0===i)throw new Error(`Severity band ${e+1}: "from" must be a number or an entity id`);if("string"!=typeof t.color||!t.color)throw new Error(`Severity band ${e+1}: "color" is required`);return{...t,from:i}});return e.every(t=>"number"==typeof t.from)?e.sort((t,e)=>t.from-e.from):e}function Yt(t,e,i){if(null==t)return{action:e};if("object"!=typeof t||"string"!=typeof t.action)throw new Error(`"${i}" must have an "action"`);return t}function Xt(t,e){return void 0!==t?t:e}function Jt(t,e,i){const n="string"==typeof t?{entity:t}:t;if(!n||"object"!=typeof n||"string"!=typeof n.entity||!n.entity)throw new Error(`Entity ${i+1} needs an "entity" id`);if(void 0!==n.attribute&&null!==n.attribute&&"string"!=typeof n.attribute)throw new Error(`Entity ${i+1}: "attribute" must be an attribute name`);const o=Xt(qt(n.min,"min"),qt(e.min,"min"))??0,r=Xt(qt(n.max,"max"),qt(e.max,"max"))??100;if("number"==typeof o&&"number"==typeof r&&o>=r)throw new Error(`"max" (${r}) must be greater than "min" (${o})`);const a={...n,entity:n.entity,min:o,max:r,severity:Gt(n.severity)??Gt(e.severity)??Vt,tap_action:Yt(Xt(n.tap_action,e.tap_action),"more-info","tap_action"),hold_action:Yt(Xt(n.hold_action,e.hold_action),"none","hold_action"),double_tap_action:Yt(Xt(n.double_tap_action,e.double_tap_action),"none","double_tap_action")},s=Xt(n.name,e.name),l=Xt(n.icon,e.icon),c=Xt(n.unit,e.unit),d=Xt(qt(n.target,"target"),qt(e.target,"target")),h=Xt(Zt(n.decimals,"decimals",0,20),Zt(e.decimals,"decimals",0,20));return void 0!==s&&(a.name=s),void 0!==l&&(a.icon=l),void 0!==c&&(a.unit=c),void 0!==d&&(a.target=d),void 0!==h&&(a.decimals=h),n.attribute||delete a.attribute,a} + */function Ct(t,e){let n,o,i=0,r=0,a=!1,s=!1;const l=n=>{const o=e(),i="tap"===n?o.tap_action:"hold"===n?o.hold_action:o.double_tap_action;At(i)&&t.dispatchEvent(new CustomEvent("hass-action",{bubbles:!0,composed:!0,detail:{config:o,action:n}}))},c=()=>{void 0!==n&&clearTimeout(n),n=void 0},d=t=>{const o=t;o.button>0||(a=!0,s=!1,i=o.clientX,r=o.clientY,c(),At(e().hold_action)&&(n=setTimeout(()=>{n=void 0,s=!0,l("hold")},500)))},h=t=>{if(!a)return;const e=t;Math.hypot(e.clientX-i,e.clientY-r)>10&&(c(),a=!1)},u=()=>{c(),a=!1},p=()=>{const t=a;c(),a=!1,t&&!s?At(e().double_tap_action)?void 0!==o?(clearTimeout(o),o=void 0,l("double_tap")):o=setTimeout(()=>{o=void 0,l("tap")},250):l("tap"):s=!1},m=t=>{const e=t;e.repeat||"Enter"!==e.key&&" "!==e.key||(" "===e.key&&e.preventDefault(),l("tap"))},f=t=>{At(e().hold_action)&&t.preventDefault()};return t.addEventListener("pointerdown",d),t.addEventListener("pointermove",h),t.addEventListener("pointerup",p),t.addEventListener("pointercancel",u),t.addEventListener("pointerleave",u),t.addEventListener("keydown",m),t.addEventListener("contextmenu",f),()=>{c(),void 0!==o&&clearTimeout(o),o=void 0,t.removeEventListener("pointerdown",d),t.removeEventListener("pointermove",h),t.removeEventListener("pointerup",p),t.removeEventListener("pointercancel",u),t.removeEventListener("pointerleave",u),t.removeEventListener("keydown",m),t.removeEventListener("contextmenu",f)}}const St={primary:{variable:"--primary-color",fallback:"#2f6fe4"},green:{variable:"--success-color",fallback:"#1fae7a"},amber:{variable:"--warning-color",fallback:"#f59e0b"},red:{variable:"--error-color",fallback:"#ef3b5a"},blue:{variable:"--info-color",fallback:"#2f6fe4"},purple:{variable:"--purple-color",fallback:"#8b6cff"},grey:{variable:"--grey-color",fallback:"#8e919a"}};function Et(t){if(Object.prototype.hasOwnProperty.call(St,t)){const{variable:e,fallback:n}=St[t];return`var(${e}, ${n})`}return t}const Ot=new Set(["amber"]);function Tt(t){if(Object.prototype.hasOwnProperty.call(St,t))return Ot.has(t)?"dark":"light";const e=function(t){const e=t.trim().toLowerCase(),n=/^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/.exec(e);if(n){const t=n[1].length<=4?[...n[1]].map(t=>t+t).join(""):n[1],[e,o,i]=[0,2,4].map(e=>parseInt(t.slice(e,e+2),16));return[e,o,i,8===t.length?parseInt(t.slice(6,8),16)/255:1]}const o=/^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)\s*(?:[,/]\s*([\d.]+)(%?)\s*)?\)$/.exec(e);if(o){const[t,e,n]=[o[1],o[2],o[3]].map(t=>Math.min(255,Number(t))),i=void 0===o[4]?1:Number(o[4])/(o[5]?100:1);return[t,e,n,Math.min(1,i)]}}(t);return e?e[3]<.5?"theme":function([t,e,n]){const o=t=>{const e=t/255;return e<=.03928?e/12.92:((e+.055)/1.055)**2.4};return.2126*o(t)+.7152*o(e)+.0722*o(n)}([e[0],e[1],e[2]])>.4?"dark":"light":"light"}function Lt(t,e){let n=e[0];for(const o of e){if(!(o.from<=t))break;n=o}return n}const Nt={battery:[{from:0,color:"red",label:"Low"},{from:20,color:"amber"},{from:50,color:"green"}],usage:[{from:0,color:"green"},{from:60,color:"amber"},{from:85,color:"red",label:"High"}],temperature:[{from:-50,color:"blue",label:"Cold"},{from:16,color:"green"},{from:24,color:"amber"},{from:28,color:"red",label:"Hot"}],none:void 0},Ut=["label","area","floor","device_class","domain","entity"];function jt(t,e){if(null==t)return;if("object"!=typeof t||Array.isArray(t))throw new Error(`"${e}" must list what to match, such as "area" or "device_class"`);const n="include"===e?Ut.filter(t=>"entity"!==t):Ut,o={};for(const[i,r]of Object.entries(t)){if(!n.includes(i))throw new Error(`"${e}" can't match on "${i}". Use: ${n.join(", ")}`);const t=(Array.isArray(r)?r:[r]).filter(t=>null!=t&&""!==t);if(t.some(t=>"string"!=typeof t))throw new Error(`"${e}.${i}" must be text or a list of text`);t.length&&(o[i]=t)}return Object.keys(o).length?o:void 0}function zt(t){const e=t.state;return"unavailable"===e||"unknown"===e||""!==e.trim()&&Number.isFinite(Number(e))}function Pt(t,e){const n=t.entity_id,o=e.entities?.[n],i=o?.device_id?e.devices?.[o.device_id]:void 0,r=o?.area_id??i?.area_id??void 0,a=t.attributes?.device_class;return{label:[...o?.labels??[],...i?.labels??[]],area:r,floor:r?e.areas?.[r]?.floor_id??void 0:void 0,device_class:"string"==typeof a?a:void 0,domain:n.slice(0,n.indexOf(".")),entity:n}}function Ht(t,e,n){const o=t[e],i=n[e];return Array.isArray(i)?i.some(t=>o.includes(t)):void 0!==i&&o.includes(i)}function Ft(t,e){return Object.keys(t).every(n=>Ht(t,n,e))}function Dt(t,e){return!!t&&Object.keys(t).some(n=>Ht(t,n,e))}const Rt=new WeakMap;const Vt=["bar","thin","segmented","tank","ring","needle","arc","line","column","area"],Bt=[{from:-1/0,color:"primary"}],It=["none","ascending","descending"];function Wt(t){if("number"==typeof t)return Number.isFinite(t)?t:void 0;if("string"==typeof t&&""!==t.trim()){const e=Number(t);return Number.isFinite(e)?e:void 0}}function Zt(t,e){if(null==t||""===t)return;const n=Wt(t);if(void 0!==n)return n;if("string"==typeof t)return t;throw new Error(`"${e}" must be a number or an entity id`)}function qt(t,e,n,o=1/0){if(null==t||""===t)return;const i=Wt(t);if(void 0===i||!Number.isInteger(i)||io){throw new Error(`"${e}" must be a whole number ${o===1/0?`of at least ${n}`:`from ${n} to ${o}`}`)}return i}function Yt(t){if(null==t)return;if(!Array.isArray(t))throw new Error('"severity" must be a list of bands');if(0===t.length)return;const e=t.map((t,e)=>{let n;try{n=Zt(t?.from,"from")}catch{n=void 0}if(void 0===n)throw new Error(`Severity band ${e+1}: "from" must be a number or an entity id`);if("string"!=typeof t.color||!t.color)throw new Error(`Severity band ${e+1}: "color" is required`);return{...t,from:n}});return e.every(t=>"number"==typeof t.from)?e.sort((t,e)=>t.from-e.from):e}function Gt(t,e,n){if(null==t)return{action:e};if("object"!=typeof t||"string"!=typeof t.action)throw new Error(`"${n}" must have an "action"`);return t}function Xt(t,e){return void 0!==t?t:e}function Jt(t,e,n){const o="string"==typeof t?{entity:t}:t;if(!o||"object"!=typeof o||"string"!=typeof o.entity||!o.entity)throw new Error(`Entity ${n+1} needs an "entity" id`);if(void 0!==o.attribute&&null!==o.attribute&&"string"!=typeof o.attribute)throw new Error(`Entity ${n+1}: "attribute" must be an attribute name`);const i=Xt(Zt(o.min,"min"),Zt(e.min,"min"))??0,r=Xt(Zt(o.max,"max"),Zt(e.max,"max"))??100;if("number"==typeof i&&"number"==typeof r&&i>=r)throw new Error(`"max" (${r}) must be greater than "min" (${i})`);const a={...o,entity:o.entity,min:i,max:r,severity:Yt(o.severity)??Yt(e.severity)??Bt,tap_action:Gt(Xt(o.tap_action,e.tap_action),"more-info","tap_action"),hold_action:Gt(Xt(o.hold_action,e.hold_action),"none","hold_action"),double_tap_action:Gt(Xt(o.double_tap_action,e.double_tap_action),"none","double_tap_action")},s=Xt(o.name,e.name),l=Xt(o.icon,e.icon),c=Xt(o.unit,e.unit),d=Xt(Zt(o.target,"target"),Zt(e.target,"target")),h=Xt(qt(o.decimals,"decimals",0,20),qt(e.decimals,"decimals",0,20));return void 0!==s&&(a.name=s),void 0!==l&&(a.icon=l),void 0!==c&&(a.unit=c),void 0!==d&&(a.target=d),void 0!==h&&(a.decimals=h),o.attribute||delete a.attribute,a} /** * @license * Copyright 2020 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ -const Kt=mt(class extends ft{constructor(t){if(super(t),t.type!==ut&&t.type!==dt&&t.type!==pt)throw Error("The `live` directive is not allowed on child or event bindings");if(!(t=>void 0===t.strings)(t))throw Error("`live` bindings can only contain a single expression")}render(t){return t}update(t,[e]){if(e===W||e===q)return e;const i=t.element,n=t.name;if(t.type===ut){if(e===i[n])return W}else if(t.type===pt){if(!!e===i.hasAttribute(n))return W}else if(t.type===dt&&i.getAttribute(n)===e+"")return W;return xt(t),e}}),Qt={en:{entity_not_found:"Entity not found",unavailable:"Unavailable",no_entities:"Add an entity in the editor to get started.",no_matches:"No entities match right now.",none_available:"None of these entities are available.",editor_section_entities:"Entities",editor_section_style:"Style",editor_section_chart:"Chart",editor_group_bars:"Bars",editor_group_gauges:"Gauges",editor_group_history:"History charts",editor_group_totals:"Parts of a total",editor_group_compare:"Comparisons",editor_group_distribution:"Distributions",editor_period_last:"Show the last",editor_period_unit:"Unit",editor_period_unit_hour:"Hours",editor_period_unit_day:"Days",editor_period_unit_week:"Weeks",editor_period_unit_month:"Months",editor_source:"Readings from",editor_source_history:"History (every change)",editor_source_statistics:"Long-term statistics",editor_curve:"Line shape",editor_curve_smooth:"Smooth",editor_curve_straight:"Straight",editor_curve_step:"Steps",editor_color_by:"Colour",editor_color_by_series:"One colour per entity",editor_color_by_bands:"By colour band",editor_labels:"Show values on the points",editor_series_color:"Line colour",editor_dash:"Dashed",editor_section_limits:"Limits",editor_section_colours:"Colours",editor_section_display:"Display",editor_section_actions:"Actions",editor_title:"Title",editor_style_bar:"Bar",editor_style_thin:"Thin",editor_style_segmented:"Segmented",editor_style_tank:"Tank",editor_style_ring:"Ring",editor_style_needle:"Needle",editor_style_arc:"Arc",editor_show_name:"Show name",editor_show_value:"Show value",editor_show_icon:"Show icon",editor_show_target:"Show target",editor_show_legend:"Show legend",editor_columns:"Columns",editor_sort:"Sort",editor_sort_none:"As listed",editor_sort_ascending:"Lowest first",editor_sort_descending:"Highest first",editor_decimals:"Decimals",editor_unit:"Unit",editor_animate:"Animate",editor_hide_unavailable:"Hide unavailable entities",editor_limit:"Show at most",editor_include_heading:"Also show every entity that matches",editor_include_help:"New devices appear without editing the card. Pick several of one kind to match any of them; different kinds must all match.",editor_exclude_heading:"Leave out",editor_exclude_help:"Matched entities are left out if they match any of these.",editor_rule_device_class:"Device class",editor_rule_area:"Areas",editor_rule_floor:"Floors",editor_rule_label:"Labels",editor_rule_domain:"Domains",editor_rule_entity:"Entities",editor_tap_action:"Tap action",editor_hold_action:"Hold action",editor_double_tap_action:"Double tap action",editor_attribute:"Attribute (instead of the state)",editor_name:"Name",editor_icon:"Icon",editor_min:"Minimum",editor_max:"Maximum",editor_target:"Target",editor_none:"None",editor_card_setting:"card setting",editor_limit_default:"Default ({value})",editor_limit_number:"Number",editor_limit_entity:"Entity",editor_preset:"Preset",editor_preset_battery:"Battery (low is bad)",editor_preset_usage:"Usage (high is bad)",editor_preset_temperature:"Temperature",editor_preset_none:"None",editor_preset_custom:"Custom",editor_band_from:"From",editor_band_from_entity:"Start from an entity",editor_band_from_number:"Start from a number",editor_band_from_entity_label:"Starts at this entity",editor_band_color:"Colour",editor_band_custom_color:"CSS colour",editor_band_label:"Label",editor_band_icon:"Icon",editor_color_icon:"Colour icons to match their band",editor_color_primary:"Primary",editor_color_green:"Green",editor_color_amber:"Amber",editor_color_red:"Red",editor_color_blue:"Blue",editor_color_purple:"Purple",editor_color_grey:"Grey",editor_color_custom:"Custom…",editor_add_band:"Add band",editor_remove_band:"Remove band",editor_add_entity:"Add entity",editor_move_up:"Move up",editor_move_down:"Move down",editor_remove_entity:"Remove entity",editor_show_options:"Show options",editor_hide_options:"Hide options",editor_not_found:"{entity} (not found)",editor_severity:"Colours"}};function te(t,e){Qt[t]={...Qt[t],...e}}function ee(t){return(t?.locale?.language??t?.language??"en").split("-")[0]}function ie(t,e,i){const n=ee(t),o=Qt[n]?.[e]??Qt.en[e]??e;return i?o.replace(/\{(\w+)\}/g,(t,e)=>e in i?String(i[e]):t):o}function ne(t){return null==t||""===t}function oe(t){return"object"==typeof t&&null!==t&&!Array.isArray(t)}function re(t,e,i){const[n,...o]=e,r=function(t,e){return Array.isArray(t)?[...t]:oe(t)?{...t}:"number"==typeof e?[]:{}}(t,n),a=r,s=o.length?re(a[n],o,i):i,l=o.length>0&&oe(s)&&0===Object.keys(s).length;return ne(s)?Array.isArray(r)&&"number"==typeof n?r.splice(n,1):delete a[n]:l&&oe(r)?delete a[n]:a[n]=s,r}function ae(t,e,i){return 0===e.length||ne(i)&&void 0===function(t,e){let i=t;for(const n of e){if("object"!=typeof i||null===i)return;i=i[n]}return i}(t,e)?t:re(t,e,i)}function se(t,e){const i=t;return{width:i.line_width??e.line_width??2.5,dots:i.dots??!0===e.dots,onTop:!0===i.on_top}}function le(t,e){return[...t.filter(t=>!e(t)),...t.filter(e)]}function ce(t){return t.map(([t,e])=>`M${Math.round(100*t)/100},${Math.round(100*e)/100}h0`).join("")}function de(t){return Math.round(10*(t+3.5))/10}function he(t,e){if(void 0!==t&&("number"!=typeof t||!Number.isFinite(t)||t<.5||t>12))throw new Error(`${e} must be a number from 0.5 to 12`)}function ue(t,e){if(void 0!==t&&"boolean"!=typeof t)throw new Error(`${e} must be true or false`)}function pe(t){he(t.line_width,'"line_width"'),ue(t.dots,'"dots"');for(const e of t.entities??[])"object"==typeof e&&(he(e.line_width,`"line_width" of ${e.entity}`),ue(e.dots,`"dots" of ${e.entity}`),ue(e.on_top,`"on_top" of ${e.entity}`))}const me=[{name:"title",path:["title"]}],fe=[{name:"show_name",path:["show","name"],default:!0},{name:"show_value",path:["show","value"],default:!0},{name:"show_icon",path:["show","icon"],default:!0},{name:"show_target",path:["show","target"],default:!0},{name:"show_legend",path:["show","legend"],default:!1},{name:"animate",path:["animate"],default:!0},{name:"hide_unavailable",path:["hide_unavailable"],default:!1}],ge=[{name:"color_icon",path:["color_icon"],default:!1}],_e=[{name:"columns",path:["columns"]},{name:"sort",path:["sort"],default:"none"},{name:"limit",path:["limit"]},{name:"decimals",path:["decimals"]},{name:"unit",path:["unit"]}],ye=[{name:"tap_action",path:["tap_action"],default:{action:"more-info"}},{name:"hold_action",path:["hold_action"],default:{action:"none"}},{name:"double_tap_action",path:["double_tap_action"],default:{action:"none"}}],ve=[{name:"name",path:["name"]},{name:"unit",path:["unit"]},{name:"decimals",path:["decimals"]}],be=[{name:"attribute",path:["attribute"]}],$e=[{name:"series_color",path:["color"]},{name:"curve",path:["curve"]},{name:"line_width",path:["line_width"]},{name:"dash",path:["dash"],default:!1},{name:"on_top",path:["on_top"],default:!1}],xe={number:{min:.5,max:12,step:.5,mode:"box",unit_of_measurement:"px"}},we=new Map;function ke(t){let e=we.get(t);return e||(e=[...$e,{name:"dots",path:["dots"],default:t}],we.set(t,e)),e}const Ae=ye.map(({name:t,path:e})=>({name:t,path:e})),Me=[{name:"title",selector:{text:{}}}],Ce=ye.map(({name:t})=>({name:t,selector:{ui_action:{}}})),Se=[{type:"grid",name:"",schema:[{name:"name",selector:{text:{}}},{name:"unit",selector:{text:{}}},{name:"decimals",selector:{number:{min:0,max:20,mode:"box"}}}]}],Ee=new Map;let Oe;function Te(t){const e=ee(t);if(Oe?.language!==e){const i=e=>ie(t,e);Oe={language:e,schema:[{type:"grid",name:"",schema:[{name:"series_color",selector:{text:{}}},{name:"curve",selector:{select:{mode:"dropdown",options:["smooth","straight","step"].map(t=>({value:t,label:i(`editor_curve_${t}`)}))}}}]},{type:"grid",name:"",schema:[{name:"line_width",selector:xe},{name:"dash",selector:{boolean:{}}},{name:"dots",selector:{boolean:{}}},{name:"on_top",selector:{boolean:{}}}]}]}}return Oe.schema}function Le(t){return[{type:"grid",name:"",schema:[{name:"columns",selector:{number:{min:1,max:6,mode:"box"}}},{name:"sort",selector:{select:{mode:"dropdown",options:["none","ascending","descending"].map(e=>({value:e,label:ie(t,`editor_sort_${e}`)}))}}},{name:"limit",selector:{number:{min:1,mode:"box"}}},{name:"decimals",selector:{number:{min:0,max:20,mode:"box"}}},{name:"unit",selector:{text:{}}}]}]}const Ne={include:["device_class","area","floor","label","domain"],exclude:["entity","device_class","area","floor","label","domain"]};function Ue(t,e){const i=t=>({select:{multiple:!0,custom_value:!0,mode:"dropdown",options:t}});switch(t){case"device_class":return i(e.deviceClasses);case"domain":return i(e.domains);case"entity":return{entity:{multiple:!0}};default:return{[t]:{multiple:!0}}}}const Pe=new Map;function ze(t,e){const i=function(t){const e=new Set,i=new Set;for(const n of Object.values(t?.states??{})){const t=n.attributes?.device_class;"string"==typeof t&&t&&e.add(t),i.add(n.entity_id.slice(0,n.entity_id.indexOf(".")))}return{deviceClasses:[...e].sort(),domains:[...i].sort()}}(e),n=`${i.deviceClasses.join()}|${i.domains.join()}`,o=Pe.get(t);if(o?.key===n)return o.schema;const r=Ne[t].map(e=>({name:`${t}_${e}`,selector:Ue(e,i)}));return Pe.set(t,{key:n,schema:r}),r}let je;function He(t,e){let i=t;for(const n of e){if("object"!=typeof i||null===i)return;i=i[n]}return i}function Fe(t,e){if(t===e)return!0;if("object"!=typeof t||"object"!=typeof e||null===t||null===e)return!1;if(Array.isArray(t)!==Array.isArray(e))return!1;const i=Object.keys(t),n=Object.keys(e);return i.length===n.length&&i.every(i=>Fe(t[i],e[i]))}function De(t,e){const i={};for(const n of e){const e=He(t,n.path)??n.default;void 0!==e&&(i[n.name]=e)}return i}function Re(t,e,i){const n=De(t,e);let o=t;for(const r of e){const t=i[r.name];Fe(n[r.name],t)||(o=ae(o,r.path,void 0!==r.default&&Fe(t,r.default)?void 0:t))}return o}const Be="var(--divider-color, rgba(127, 127, 127, 0.3))",Ve="var(--primary-color, #03a9f4)",Ie="var(--secondary-text-color, #727272)";function We(t,e,i,n){const o=(n-90)*Math.PI/180;return[(t+i*Math.cos(o)).toFixed(2),(e+i*Math.sin(o)).toFixed(2)]}function qe(t,e,i,n){return We(t,e,i,n).join(" ")}function Ze(t,e,i,n,o){const r=o-n>180?1:0;return`M ${qe(t,e,i,n)} A ${i} ${i} 0 ${r} 1 ${qe(t,e,i,o)}`}function Ge(t){return V`
- ${a} - ${0!==o?V``:q} -
`}const En=r` + `:Z} + `}const Lo=r` .period-nav { display: flex; align-items: center; @@ -142,16 +142,16 @@ const Kt=mt(class extends ft{constructor(t){if(super(t),t.type!==ut&&t.type!==dt border: 1px solid color-mix(in srgb, var(--primary-color) 40%, transparent); white-space: nowrap; } -`;function On(t){!function(t){mn.get(t)?.pause()}(t)}function Tn(t,e){const{show:i}=e.config;return i.name||i.value?V`
- ${t.series.map(t=>V`
+`;function No(t){!function(t){yo.get(t)?.pause()}(t)}function Uo(t,e){const{show:n}=e.config;return n.name||n.value?B`
+ ${t.series.map(t=>B`
- ${i.name?V`${t.entity.name}`:q} - ${i.value?V`${t.entity.display}`:q} + ${n.name?B`${t.entity.name}`:Z} + ${n.value?B`${t.entity.display}`:Z}
`)} -
`:q}function Ln(t,e){return"loading"===t.status?V`
${ie(e.hass,"chart_loading")}
`:"error"===t.status?V`
- ${ie(e.hass,"chart_error",{error:t.error??""})} -
`:t.series.every(t=>t.points.every(t=>null===t.v))?V`
${ie(e.hass,"chart_no_data")}
`:void 0}const Nn=r` - ${En} +
`:Z}function jo(t,e){return"loading"===t.status?B`
${ne(e.hass,"chart_loading")}
`:"error"===t.status?B`
+ ${ne(e.hass,"chart_error",{error:t.error??""})} +
`:t.series.every(t=>t.points.every(t=>null===t.v))?B`
${ne(e.hass,"chart_no_data")}
`:void 0}const zo=r` + ${Lo} .series-header { display: flex; flex-wrap: wrap; @@ -239,14 +239,14 @@ const Kt=mt(class extends ft{constructor(t){if(super(t),t.type!==ut&&t.type!==dt background: color-mix(in srgb, var(--card-background-color, #fff) 80%, transparent); white-space: nowrap; } -`;function Un(t,e,i){const{locale:n,grouping:o}=function(t){const e=t?.locale?.language??"en";switch(t?.locale?.number_format){case"system":return{locale:void 0,grouping:!0};case"comma_decimal":return{locale:"en-US",grouping:!0};case"decimal_comma":return{locale:"de",grouping:!0};case"space_comma":return{locale:"fr",grouping:!0};case"none":return{locale:"en-US",grouping:!1};default:return{locale:e,grouping:!0}}}(i),r=new Intl.NumberFormat(n,{minimumFractionDigits:e,maximumFractionDigits:e,useGrouping:o});let a=r.format(0===t?0:t);return 0===Number(t.toFixed(e))&&(a=r.format(0)),a}function Pn(t,e){return e?`${t} ${e}`:t}const zn=new WeakMap;function jn(t){zn.get(t)?.observer?.disconnect(),zn.delete(t)}function Hn(t){const e=ri(t.raw);return Math.max(0,function(t){let e=zn.get(t.host);if(!e){const i={width:t.host.clientWidth||400};e=i,zn.set(t.host,i),"undefined"!=typeof ResizeObserver&&(i.observer=new ResizeObserver(e=>{const n=Math.round(e[e.length-1].contentRect.width);Math.round(n/70)!==Math.round(i.width/70)&&(i.width=n,t.requestUpdate())}),i.observer.observe(t.host))}return e.width}(t)-32-(e.y&&"outside"===e.labels?40:0))}function Fn(t,e,i){const n=ri(t.raw),o=li(i,n,4),r=Math.max(2,Math.min(8,Math.floor(Hn(t)/70))),{unit:a,ticks:s}=_i(e,r,mi(yi(t.hass)));return{options:n,value:o,times:s,unit:a,range:e,scales:{x:Xe([e.start,e.end],[0,bn]),y:Xe(o.domain,[$n,0]),domain:o.domain}}}const Dn=t=>Math.round(1e4*t)/100+"%";function Rn({axes:t,ctx:e,content:i,label:n,defs:o=q,overlay:r=q,hover:a}){const{options:s}=t,l="outside"===s.labels,c=s.y&&t.value.ticks.length>0,d=s.x&&t.times.length>0,h=c?function(t,e){const{scales:i,value:n}=t;return n.ticks.map(t=>{const o=i.y(t)/$n;return V`.92?"bottom":""}" style="top:${Dn(o)}" - >${Un(t,n.decimals,e.hass)}`})}(t,e):[],u=c?V`
${h}
`:q,p=d?V`
${function(t,e){const{scales:i,range:n}=t,o=mi(yi(e.hass));return t.times.map(r=>{const a=i.x(r)/bn;return V`.95?"end":""}" style="left:${Dn(a)}" - >${xi(r,t.unit,n.end-n.start,e.hass,o)}`})}(t,e)}
`:q,m=c?V``:q;return V`
- ${l&&c?V`
${m}${h}
`:q} +`;function Po(t,e,n){const{locale:o,grouping:i}=function(t){const e=t?.locale?.language??"en";switch(t?.locale?.number_format){case"system":return{locale:void 0,grouping:!0};case"comma_decimal":return{locale:"en-US",grouping:!0};case"decimal_comma":return{locale:"de",grouping:!0};case"space_comma":return{locale:"fr",grouping:!0};case"none":return{locale:"en-US",grouping:!1};default:return{locale:e,grouping:!0}}}(n),r=new Intl.NumberFormat(o,{minimumFractionDigits:e,maximumFractionDigits:e,useGrouping:i});let a=r.format(0===t?0:t);return 0===Number(t.toFixed(e))&&(a=r.format(0)),a}function Ho(t,e){return e?`${t} ${e}`:t}const Fo=new WeakMap;function Do(t){Fo.get(t)?.observer?.disconnect(),Fo.delete(t)}function Ro(t){const e=an(t.raw);return Math.max(0,function(t){let e=Fo.get(t.host);if(!e){const n={width:t.host.clientWidth||400};e=n,Fo.set(t.host,n),"undefined"!=typeof ResizeObserver&&(n.observer=new ResizeObserver(e=>{const o=Math.round(e[e.length-1].contentRect.width);Math.round(o/70)!==Math.round(n.width/70)&&(n.width=o,t.requestUpdate())}),n.observer.observe(t.host))}return e.width}(t)-32-(e.y&&"outside"===e.labels?40:0))}function Vo(t,e,n){const o=an(t.raw),i=cn(n,o,4),r=Math.max(2,Math.min(8,Math.floor(Ro(t)/70))),{unit:a,ticks:s}=_n(e,r,fn(vn(t.hass)));return{options:o,value:i,times:s,unit:a,range:e,scales:{x:Xe([e.start,e.end],[0,wo]),y:Xe(i.domain,[ko,0]),domain:i.domain}}}const Bo=t=>Math.round(1e4*t)/100+"%";function Io({axes:t,ctx:e,content:n,label:o,defs:i=Z,overlay:r=Z,hover:a}){const{options:s}=t,l="outside"===s.labels,c=s.y&&t.value.ticks.length>0,d=s.x&&t.times.length>0,h=c?function(t,e){const{scales:n,value:o}=t;return o.ticks.map(t=>{const i=n.y(t)/ko;return B`.92?"bottom":""}" style="top:${Bo(i)}" + >${Po(t,o.decimals,e.hass)}`})}(t,e):[],u=c?B`
${h}
`:Z,p=d?B`
${function(t,e){const{scales:n,range:o}=t,i=fn(vn(e.hass));return t.times.map(r=>{const a=n.x(r)/wo;return B`.95?"end":""}" style="left:${Bo(a)}" + >${t.label?t.label(r):Mn(r,t.unit,o.end-o.start,e.hass,i)}`})}(t,e)}
`:Z,m=c?B``:Z;return B`
+ ${l&&c?B`
${m}${h}
`:Z}
- ${function(t,e,i=q,n=q){return V` - + - ${i} + ${n} - ${n} + ${o} ${t} - `}(i,n,o,function(t){const{options:e,scales:i}=t;return I` - ${e.horizontal?t.value.ticks.map(t=>I``):q} - ${e.vertical?t.times.map(t=>I``):q} - `}(t))} ${l?q:V`${u}${p}`} ${r} + `}(n,o,i,function(t){const{options:e,scales:n}=t;return I` + ${e.horizontal?t.value.ticks.map(t=>I``):Z} + ${e.vertical?t.times.map(t=>I``):Z} + `}(t))} ${l?Z:B`${u}${p}`} ${r}
- ${l?p:q} -
`}const Bn=r` + ${l?p:Z} +
`}const Wo=r` .plot-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); @@ -369,9 +369,9 @@ const Kt=mt(class extends ft{constructor(t){if(super(t),t.type!==ut&&t.type!==dt border-radius: 2px; background: color-mix(in srgb, var(--card-background-color, #fff) 70%, transparent); } -`,Vn=["above","over","hidden"];function In(t){if(void 0!==t.compact&&"boolean"!=typeof t.compact)throw new Error('"compact" must be true or false');if(void 0!==t.header&&!Vn.includes(t.header))throw new Error(`"header" must be one of: ${Vn.join(", ")}`)}function Wn(t){return{compact:!0===t.compact,header:t.header??"above"}}function qn(t,e,i){return V`
- ${"above"===t.header?e:q}${i} -
`}function Zn(t){return t===q?q:V`
t.stopPropagation()}>${t}
`}const Gn=r` +`,Zo=["above","over","hidden"];function qo(t){if(void 0!==t.compact&&"boolean"!=typeof t.compact)throw new Error('"compact" must be true or false');if(void 0!==t.header&&!Zo.includes(t.header))throw new Error(`"header" must be one of: ${Zo.join(", ")}`)}function Yo(t){return{compact:!0===t.compact,header:t.header??"above"}}function Go(t,e,n){return B`
+ ${"above"===t.header?e:Z}${n} +
`}function Xo(t){return t===Z?Z:B`
t.stopPropagation()}>${t}
`}const Jo=r` .header-over { position: absolute; top: 2px; @@ -424,22 +424,26 @@ const Kt=mt(class extends ft{constructor(t){if(super(t),t.type!==ut&&t.type!==dt .frame.compact .axes-outside .x-axis .axis-label { top: 3px; } -`,Yn=["none","normal","percent"];function Xn(t,e){if(0===t.length)return-1;let i=0,n=t.length-1;for(;i>1;t[o].t0&&e-t[i-1].t<=t[i].t-e?i-1:i}const Jn=new WeakMap;function Kn(t){return Jn.get(t)?.t}function Qn(t){const e=Jn.get(t);void 0!==e?.timer&&clearTimeout(e.timer),Jn.delete(t)}function to(t){return!1!==t.tooltip}function eo(t){const e=t.tooltip;if(void 0!==e&&"boolean"!=typeof e)throw new Error('"tooltip" must be true or false')}function io(t,e,i){const n=function(t){let e=Jn.get(t);return e||(e={},Jn.set(t,e)),e}(t.host),o=e=>{e!==n.t&&(n.t=e,t.requestUpdate())},r=()=>{void 0!==n.timer&&clearTimeout(n.timer),n.timer=void 0};return{move(t){r();const n=t.currentTarget.getBoundingClientRect(),a=n.width>0?Math.min(1,Math.max(0,(t.clientX-n.left)/n.width)):0;o(function(t,e){let i;for(const n of t){const t=Xn(n,e);if(t<0)continue;const o=n[t].t;(void 0===i||Math.abs(o-e){n.timer=void 0,o(void 0)},3e3):o(void 0)}}}const no=t=>Math.round(1e4*t)/100+"%";function oo(t,e,i,n,o,r={}){if(void 0===n)return q;const a=i.x(n)/bn;if(!(a>=0&&a<=1))return q;const s=function(t,e){const i=t*e;return i+190<=e?"right":i>=190?"left":t>.5?"pin-left":"pin-right"}(a,o),l=e.map(t=>{const e=Xn(t.points,n);return{s:t,p:e<0?void 0:t.points[e]}});return V``}},Fr={layout:"tiles",group:"bars",height:230,tilesPerRow:4,minColumnWidth:80,styles:r` .style-tank .entity { display: flex; flex-direction: column; @@ -1147,20 +1239,20 @@ const Kt=mt(class extends ft{constructor(t){if(super(t),t.type!==ut&&t.type!==dt text-overflow: ellipsis; white-space: nowrap; } - `,render:(t,{show:e,hass:i})=>V` - ${e.icon?V`B` + ${e.icon?B``:q} - ${e.value||!t.available?V`${t.display}`:q} + .icon=${Ri(t)} + >`:Z} + ${e.value||!t.available?B`${t.display}`:Z}
- ${e.target&&null!==t.targetPosition&&t.available?V`
`:q} + ${e.target&&null!==t.targetPosition&&t.available?B`
`:Z}
- ${e.name?V`${t.name}`:q} - `},hr={layout:"rows",group:"bars",height:44,minColumnWidth:140,styles:r` + ${e.name?B`${t.name}`:Z} + `},Dr={layout:"rows",group:"bars",height:44,minColumnWidth:140,styles:r` .style-thin .entity { display: flex; align-items: center; @@ -1226,37 +1318,37 @@ const Kt=mt(class extends ft{constructor(t){if(super(t),t.type!==ut&&t.type!==dt background: var(--primary-text-color); transition: left var(--cd-duration) var(--cd-easing); } - `,render(t,{show:e,hass:i}){const n=e.value||!t.available;return V` - ${e.icon?V``:q} + .icon=${Ri(t)} + >`:Z}
- ${e.name||n?V`
- ${e.name?V`${t.name}`:q} - ${n?V`${t.display}`:q} -
`:q} + ${e.name||o?B`
+ ${e.name?B`${t.name}`:Z} + ${o?B`${t.display}`:Z} +
`:Z}
- ${e.target&&null!==t.targetPosition&&t.available?V`
`:q} + ${e.target&&null!==t.targetPosition&&t.available?B`
`:Z}
- `}},ur=["bars","gauges","history","totals","compare","distribution"];function pr(t){return"chart"===t.layout}const mr={bar:Fo,thin:hr,segmented:cr,tank:dr,ring:ar,needle:Qo,arc:sr,line:Bo,area:So},fr="important",gr=" !"+fr,_r=mt(class extends ft{constructor(t){if(super(t),t.type!==dt||"style"!==t.name||t.strings?.length>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(t){return Object.keys(t).reduce((e,i)=>{const n=t[i];return null==n?e:e+`${i=i.includes("-")?i:i.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${n};`},"")}update(t,[e]){const{style:i}=t.element;if(void 0===this.ft)return this.ft=new Set(Object.keys(e)),this.render(e);for(const n of this.ft)null==e[n]&&(this.ft.delete(n),n.includes("-")?i.removeProperty(n):i[n]=null);for(const n in e){const t=e[n];if(null!=t){this.ft.add(n);const e="string"==typeof t&&t.endsWith(gr);n.includes("-")||e?i.setProperty(n,e?t.slice(0,-11):t,e?fr:""):i[n]=t}}return W}}),yr=Object.keys(Nt),vr=Object.keys(St),br="custom",$r={text:{}},xr={entity:{domain:["sensor","input_number","number"]}}; + `}},Rr=["bars","gauges","history","totals","compare","distribution"];function Vr(t){return"chart"===t.layout}const Br={bar:Yi,thin:Dr,segmented:Hr,tank:Fr,ring:jr,needle:Sr,arc:zr,line:yr,column:mr,area:Pi},Ir="important",Wr=" !"+Ir,Zr=mt(class extends ft{constructor(t){if(super(t),t.type!==dt||"style"!==t.name||t.strings?.length>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(t){return Object.keys(t).reduce((e,n)=>{const o=t[n];return null==o?e:e+`${n=n.includes("-")?n:n.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${o};`},"")}update(t,[e]){const{style:n}=t.element;if(void 0===this.ft)return this.ft=new Set(Object.keys(e)),this.render(e);for(const o of this.ft)null==e[o]&&(this.ft.delete(o),o.includes("-")?n.removeProperty(o):n[o]=null);for(const o in e){const t=e[o];if(null!=t){this.ft.add(o);const e="string"==typeof t&&t.endsWith(Wr);o.includes("-")||e?n.setProperty(o,e?t.slice(0,-11):t,e?Ir:""):n[o]=t}}return W}}),qr=Object.keys(Nt),Yr=Object.keys(St),Gr="custom",Xr={text:{}},Jr={entity:{domain:["sensor","input_number","number"]}}; /** * @license * Copyright 2018 Google LLC * SPDX-License-Identifier: BSD-3-Clause - */function wr(t){return"string"==typeof t&&""!==t.trim()&&!Number.isFinite(Number(t))}const kr={icon:{}};function Ar(t){return void 0===t?"none":yr.find(e=>Nt[e]&&Fe(Nt[e],t))??"custom"}function Mr(t){return vr.includes(t)}class Cr extends lt{constructor(){super(),this._customOpen=new Set,this._entityOpen=new Set}willUpdate(t){t.has("bands")&&(this._customOpen.size&&(this._customOpen=new Set),this._entityOpen.size&&(this._entityOpen=new Set))}_entityValue(t){const e=this.hass?.states[t]?.state,i=void 0===e||""===e.trim()?NaN:Number(e);return Number.isFinite(i)?i:void 0}_t(t){return ie(this.hass,t)}_getSelectors(){const t=`${ee(this.hass)}|${this.unit??""}`;if(this._selectors?.key===t)return this._selectors;const e=yr.map(t=>({value:t,label:this._t(`editor_preset_${t}`)})),i=t=>({select:{mode:"dropdown",options:t}});return this._selectors={key:t,preset:i(e),presetCustom:i([...e,{value:br,label:this._t("editor_preset_custom")}]),color:i([...vr,br].map(t=>({value:t,label:this._t(`editor_color_${t}`)}))),from:{number:{mode:"box",step:"any",...this.unit?{unit_of_measurement:this.unit}:{}}}},this._selectors}_emit(t){this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:t&&t.length?t:void 0}}))}_presetChanged(t){t.stopPropagation();const e=t.detail?.value;if(!e||e===br||!yr.includes(e))return;if(e===Ar(this.bands))return;const i=Nt[e];this._emit(i?structuredClone(i):void 0)}_updateBand(t,e,i){const n=[...this.bands??[]],o={...n[t]};null==i||""===i?delete o[e]:o[e]=i,n[t]=o,this._emit(n)}_fromChanged(t,e){e.stopPropagation();const i=Number(e.detail?.value);""!==e.detail?.value&&null!=e.detail?.value&&Number.isFinite(i)&&this._updateBand(t,"from",i)}_fromEntityChanged(t,e){e.stopPropagation();const i=e.detail?.value;"string"==typeof i&&""!==i&&this._updateBand(t,"from",i)}_toggleFromMode(t){const e=this.bands?.[t]?.from,i=new Set(this._entityOpen);wr(e)?this._updateBand(t,"from",this._entityValue(e)??0):i.delete(t)||i.add(t),this._entityOpen=i}_colorChanged(t,e){e.stopPropagation();const i=e.detail?.value,n=this.bands?.[t]?.color??"primary";if(!i)return;const o=new Set(this._customOpen);i!==br?(o.delete(t),this._customOpen=o,i!==n&&this._updateBand(t,"color",i)):Mr(n)&&(this._customOpen=o.add(t))}_customColorChanged(t,e){e.stopPropagation();const i="string"==typeof e.detail?.value?e.detail.value.trim():"";if(!i)return;const n=new Set(this._customOpen);n.delete(t),this._customOpen=n,this._updateBand(t,"color",i)}_iconChanged(t,e){e.stopPropagation(),this._updateBand(t,"icon",e.detail?.value)}_labelChanged(t,e){e.stopPropagation(),this._updateBand(t,"label",e.detail?.value)}_removeBand(t){const e=[...this.bands??[]];e.splice(t,1),this._emit(e)}_addBand(){const t=[...this.bands??[]],e=t[t.length-1]?.from,i="number"==typeof e?e:wr(e)?this._entityValue(e)??NaN:"string"==typeof e&&""!==e.trim()?Number(e):NaN;t.push({from:Number.isFinite(i)?i+10:0,color:"primary"}),this._emit(t)}_renderBand(t,e,i){const n=!Mr(t.color)||this._customOpen.has(e),o=wr(t.from)?t.from:void 0,r=void 0!==o||this._entityOpen.has(e);return V`
- + */function Kr(t){return"string"==typeof t&&""!==t.trim()&&!Number.isFinite(Number(t))}const Qr={icon:{}};function ta(t){return void 0===t?"none":qr.find(e=>Nt[e]&&Fe(Nt[e],t))??"custom"}function ea(t){return Yr.includes(t)}class na extends lt{constructor(){super(),this._customOpen=new Set,this._entityOpen=new Set}willUpdate(t){t.has("bands")&&(this._customOpen.size&&(this._customOpen=new Set),this._entityOpen.size&&(this._entityOpen=new Set))}_entityValue(t){const e=this.hass?.states[t]?.state,n=void 0===e||""===e.trim()?NaN:Number(e);return Number.isFinite(n)?n:void 0}_t(t){return ne(this.hass,t)}_getSelectors(){const t=`${ee(this.hass)}|${this.unit??""}`;if(this._selectors?.key===t)return this._selectors;const e=qr.map(t=>({value:t,label:this._t(`editor_preset_${t}`)})),n=t=>({select:{mode:"dropdown",options:t}});return this._selectors={key:t,preset:n(e),presetCustom:n([...e,{value:Gr,label:this._t("editor_preset_custom")}]),color:n([...Yr,Gr].map(t=>({value:t,label:this._t(`editor_color_${t}`)}))),from:{number:{mode:"box",step:"any",...this.unit?{unit_of_measurement:this.unit}:{}}}},this._selectors}_emit(t){this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:t&&t.length?t:void 0}}))}_presetChanged(t){t.stopPropagation();const e=t.detail?.value;if(!e||e===Gr||!qr.includes(e))return;if(e===ta(this.bands))return;const n=Nt[e];this._emit(n?structuredClone(n):void 0)}_updateBand(t,e,n){const o=[...this.bands??[]],i={...o[t]};null==n||""===n?delete i[e]:i[e]=n,o[t]=i,this._emit(o)}_fromChanged(t,e){e.stopPropagation();const n=Number(e.detail?.value);""!==e.detail?.value&&null!=e.detail?.value&&Number.isFinite(n)&&this._updateBand(t,"from",n)}_fromEntityChanged(t,e){e.stopPropagation();const n=e.detail?.value;"string"==typeof n&&""!==n&&this._updateBand(t,"from",n)}_toggleFromMode(t){const e=this.bands?.[t]?.from,n=new Set(this._entityOpen);Kr(e)?this._updateBand(t,"from",this._entityValue(e)??0):n.delete(t)||n.add(t),this._entityOpen=n}_colorChanged(t,e){e.stopPropagation();const n=e.detail?.value,o=this.bands?.[t]?.color??"primary";if(!n)return;const i=new Set(this._customOpen);n!==Gr?(i.delete(t),this._customOpen=i,n!==o&&this._updateBand(t,"color",n)):ea(o)&&(this._customOpen=i.add(t))}_customColorChanged(t,e){e.stopPropagation();const n="string"==typeof e.detail?.value?e.detail.value.trim():"";if(!n)return;const o=new Set(this._customOpen);o.delete(t),this._customOpen=o,this._updateBand(t,"color",n)}_iconChanged(t,e){e.stopPropagation(),this._updateBand(t,"icon",e.detail?.value)}_labelChanged(t,e){e.stopPropagation(),this._updateBand(t,"label",e.detail?.value)}_removeBand(t){const e=[...this.bands??[]];e.splice(t,1),this._emit(e)}_addBand(){const t=[...this.bands??[]],e=t[t.length-1]?.from,n="number"==typeof e?e:Kr(e)?this._entityValue(e)??NaN:"string"==typeof e&&""!==e.trim()?Number(e):NaN;t.push({from:Number.isFinite(n)?n+10:0,color:"primary"}),this._emit(t)}_renderBand(t,e,n){const o=!ea(t.color)||this._customOpen.has(e),i=Kr(t.from)?t.from:void 0,r=void 0!==i||this._entityOpen.has(e);return B`
+ this._fromChanged(e,t)} > @@ -1265,8 +1357,8 @@ const Kt=mt(class extends ft{constructor(t){if(super(t),t.type!==ut&&t.type!==dt data-role="color" .hass=${this.hass} .label=${this._t("editor_band_color")} - .selector=${i.color} - .value=${n?br:t.color} + .selector=${n.color} + .value=${o?Gr:t.color} @value-changed=${t=>this._colorChanged(e,t)} > this._labelChanged(e,t)} > @@ -1283,7 +1375,7 @@ const Kt=mt(class extends ft{constructor(t){if(super(t),t.type!==ut&&t.type!==dt data-role="icon" .hass=${this.hass} .label=${this._t("editor_band_icon")} - .selector=${kr} + .selector=${Qr} .value=${t.icon??""} @value-changed=${t=>this._iconChanged(e,t)} > @@ -1300,37 +1392,37 @@ const Kt=mt(class extends ft{constructor(t){if(super(t),t.type!==ut&&t.type!==dt .label=${this._t("editor_remove_band")} @click=${()=>this._removeBand(e)} > - ${r?V`this._fromEntityChanged(e,t)} - >`:q} - ${n?V``:Z} + ${o?B`this._customColorChanged(e,t)} - >`:q} -
`}render(){const t=this._getSelectors(),e=Ar(this.bands);return V``:Z} +
`}render(){const t=this._getSelectors(),e=ta(this.bands);return B` - ${(this.bands??[]).map((e,i)=>this._renderBand(e,i,t))} - `}}Cr.properties={hass:{attribute:!1},bands:{attribute:!1},unit:{attribute:!1},_customOpen:{state:!0},_entityOpen:{state:!0}},Cr.styles=r` + ${(this.bands??[]).map((e,n)=>this._renderBand(e,n,t))} + `}}na.properties={hass:{attribute:!1},bands:{attribute:!1},unit:{attribute:!1},_customOpen:{state:!0},_entityOpen:{state:!0}},na.styles=r` :host { display: block; } @@ -1397,7 +1489,7 @@ const Kt=mt(class extends ft{constructor(t){if(super(t),t.type!==ut&&t.type!==dt outline: 2px solid var(--primary-color, #03a9f4); outline-offset: 2px; } - `,customElements.get("cd-bands-editor")||customElements.define("cd-bands-editor",Cr);const Sr={number:{mode:"box",step:"any"}},Er={entity:{domain:["sensor","input_number","number"]}};function Or(t){return null==t||""===t?"default":"number"==typeof t||""!==t.trim()&&Number.isFinite(Number(t))?"number":"entity"}class Tr extends lt{willUpdate(t){t.has("value")&&"default"!==Or(this.value)&&(this._mode=void 0)}_modeSelectorFor(){const t=(t,e)=>ie(this.hass,t,e),e=[{value:"default",label:t("editor_limit_default",{value:this.defaultLabel??""})},{value:"number",label:t("editor_limit_number")},{value:"entity",label:t("editor_limit_entity")}],i=e.map(t=>t.label).join("|");return this._modeSelector?.key!==i&&(this._modeSelector={key:i,selector:{select:{mode:"dropdown",options:e}}}),this._modeSelector.selector}get _currentMode(){return this._mode??Or(this.value)}_emit(t){this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:t}}))}_modeChanged(t){t.stopPropagation();const e=t.detail?.value;e&&e!==this._currentMode&&(this._mode=e,void 0!==this.value&&this._emit(void 0))}_numberChanged(t){t.stopPropagation();const e=t.detail?.value,i="number"==typeof e?e:""===e||null==e?NaN:Number(e);this._mode="number",this._emit(Number.isFinite(i)?i:void 0)}_entityChanged(t){t.stopPropagation();const e=t.detail?.value;this._mode="entity",this._emit("string"==typeof e&&""!==e?e:void 0)}render(){const t=t=>ie(this.hass,t),e=this._currentMode;return V`ne(this.hass,t,e),e=[{value:"default",label:t("editor_limit_default",{value:this.defaultLabel??""})},{value:"number",label:t("editor_limit_number")},{value:"entity",label:t("editor_limit_entity")}],n=e.map(t=>t.label).join("|");return this._modeSelector?.key!==n&&(this._modeSelector={key:n,selector:{select:{mode:"dropdown",options:e}}}),this._modeSelector.selector}get _currentMode(){return this._mode??ra(this.value)}_emit(t){this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:t}}))}_modeChanged(t){t.stopPropagation();const e=t.detail?.value;e&&e!==this._currentMode&&(this._mode=e,void 0!==this.value&&this._emit(void 0))}_numberChanged(t){t.stopPropagation();const e=t.detail?.value,n="number"==typeof e?e:""===e||null==e?NaN:Number(e);this._mode="number",this._emit(Number.isFinite(n)?n:void 0)}_entityChanged(t){t.stopPropagation();const e=t.detail?.value;this._mode="entity",this._emit("string"==typeof e&&""!==e?e:void 0)}render(){const t=t=>ne(this.hass,t),e=this._currentMode;return B` - ${"number"===e?V``:"entity"===e?V``:"entity"===e?B``:q}`}}Tr.properties={hass:{attribute:!1},label:{attribute:!1},value:{attribute:!1},defaultLabel:{attribute:!1},_mode:{state:!0}},Tr.styles=r` + >`:Z}`}}aa.properties={hass:{attribute:!1},label:{attribute:!1},value:{attribute:!1},defaultLabel:{attribute:!1},_mode:{state:!0}},aa.styles=r` :host { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: start; } - `,customElements.get("cd-limit-field")||customElements.define("cd-limit-field",Tr);const Lr=["min","max","target"];function Nr(t,e,i){const n=e&&!i?t?.states[e]?.attributes?.unit_of_measurement:void 0;return"string"==typeof n&&n?n:void 0}class Ur extends lt{constructor(){super(),this._computeLabel=t=>this._t(`editor_${t.name}`),this._expanded=new Set}_t(t,e){return ie(this.hass,t,e)}get _asConfig(){return{type:"",entities:this.entities??[]}}_emit(t){t.entities!==this.entities&&this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:t.entities??[]}}))}_set(t,e,i){this._emit(function(t,e,i,n){if("entity"===i&&(ne(n)||"string"!=typeof n))return t;const o=[...t.entities??[]],r=o[e];if(void 0===r)return t;const a="string"==typeof r?{entity:r}:{...r};ne(n)?delete a[i]:a[i]=n;const s=Object.keys(a);return o[e]=1===s.length&&"entity"===s[0]&&"string"==typeof a.entity?a.entity:a,{...t,entities:o}}(this._asConfig,t,e,i))}_move(t,e){const i=new Set;for(const n of this._expanded)i.add(n===t?e:n===e?t:n);this._expanded=i,this._emit(function(t,e,i){const n=[...t.entities??[]];if(e<0||e>=n.length||e===i)return t;const[o]=n.splice(e,1);return n.splice(Math.max(0,Math.min(i,n.length)),0,o),{...t,entities:n}}(this._asConfig,t,e))}_remove(t){const e=new Set;for(const i of this._expanded)i!==t&&e.add(i>t?i-1:i);this._expanded=e,this._emit(function(t,e){const i=[...t.entities??[]];return e<0||e>=i.length?t:(i.splice(e,1),{...t,entities:i})}(this._asConfig,t))}_toggle(t){const e=new Set(this._expanded);e.delete(t)||e.add(t),this._expanded=e}_add(t){t.stopPropagation();const e=t.detail?.value;"string"==typeof e&&""!==e&&(t.target.value="",this._emit(function(t,e){return{...t,entities:[...t.entities??[],e]}}(this._asConfig,e)))}_formChanged(t,e,i){i.stopPropagation();const n=this.entities?.[t];if(void 0===n)return;const o="string"==typeof n?{entity:n}:n,r=Re(o,e,i.detail?.value??{});if(r===o)return;const a=[...this.entities??[]],s=Object.keys(r);a[t]=1===s.length&&"entity"===s[0]?r.entity:r,this._emit({type:"",entities:a})}_rowLabel(t){const e=this.hass?.states[t];return e?{text:e.attributes.friendly_name||t,missing:!1}:this.hass?{text:this._t("editor_not_found",{entity:t}),missing:!0}:{text:t,missing:!1}}_form(t,e,i,n,o){return V`this._t(`editor_${t.name}`),this._expanded=new Set}_t(t,e){return ne(this.hass,t,e)}get _asConfig(){return{type:"",entities:this.entities??[]}}_emit(t){t.entities!==this.entities&&this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:t.entities??[]}}))}_set(t,e,n){this._emit(function(t,e,n,o){if("entity"===n&&(oe(o)||"string"!=typeof o))return t;const i=[...t.entities??[]],r=i[e];if(void 0===r)return t;const a="string"==typeof r?{entity:r}:{...r};oe(o)?delete a[n]:a[n]=o;const s=Object.keys(a);return i[e]=1===s.length&&"entity"===s[0]&&"string"==typeof a.entity?a.entity:a,{...t,entities:i}}(this._asConfig,t,e,n))}_move(t,e){const n=new Set;for(const o of this._expanded)n.add(o===t?e:o===e?t:o);this._expanded=n,this._emit(function(t,e,n){const o=[...t.entities??[]];if(e<0||e>=o.length||e===n)return t;const[i]=o.splice(e,1);return o.splice(Math.max(0,Math.min(n,o.length)),0,i),{...t,entities:o}}(this._asConfig,t,e))}_remove(t){const e=new Set;for(const n of this._expanded)n!==t&&e.add(n>t?n-1:n);this._expanded=e,this._emit(function(t,e){const n=[...t.entities??[]];return e<0||e>=n.length?t:(n.splice(e,1),{...t,entities:n})}(this._asConfig,t))}_toggle(t){const e=new Set(this._expanded);e.delete(t)||e.add(t),this._expanded=e}_add(t){t.stopPropagation();const e=t.detail?.value;"string"==typeof e&&""!==e&&(t.target.value="",this._emit(function(t,e){return{...t,entities:[...t.entities??[],e]}}(this._asConfig,e)))}_formChanged(t,e,n){n.stopPropagation();const o=this.entities?.[t];if(void 0===o)return;const i="string"==typeof o?{entity:o}:o,r=Re(i,e,n.detail?.value??{});if(r===i)return;const a=[...this.entities??[]],s=Object.keys(r);a[t]=1===s.length&&"entity"===s[0]?r.entity:r,this._emit({type:"",entities:a})}_rowLabel(t){const e=this.hass?.states[t];return e?{text:e.attributes.friendly_name||t,missing:!1}:this.hass?{text:this._t("editor_not_found",{entity:t}),missing:!0}:{text:t,missing:!1}}_form(t,e,n,o,i){return B`this._formChanged(e,o,t)} - >`}_renderOverrides(t,e){const i=t=>e=>{e.stopPropagation(),t(e.detail?.value)};return V`
+ @value-changed=${t=>this._formChanged(e,i,t)} + >`}_renderOverrides(t,e){const n=t=>e=>{e.stopPropagation(),t(e.detail?.value)};return B`
${this._form("entity-attribute",e,t,function(t){let e=Ee.get(t);return e||(e=[{name:"attribute",selector:{attribute:{entity_id:t}}}],Ee.set(t,e)),e}(t.entity),be)} ${this._form("entity-text",e,t,Se,ve)} - ${this.chartFields?this._form("entity-chart",e,t,this.chartFields.schema,this.chartFields.fields):q} + ${this.chartFields?this._form("entity-chart",e,t,this.chartFields.schema,this.chartFields.fields):Z} this._set(e,"icon",t))} + @value-changed=${n(t=>this._set(e,"icon",t))} > - ${Lr.map(n=>V`B`this._set(e,n,t))} + @value-changed=${n(t=>this._set(e,o,t))} >`)} this._set(e,"severity",t))} + .unit=${t.unit??this.unit??la(this.hass,t.entity,t.attribute)} + @value-changed=${n(t=>this._set(e,"severity",t))} > - ${this._form("entity-actions",e,t,Ce,Ae)} -
`}_renderRow(t,e,i){const n=function(t){return"string"==typeof t?t:t.entity}(t),o="string"==typeof t?{entity:t}:t,r=this._rowLabel(n),a=this._expanded.has(e);return V`
+ ${this._form("entity-actions",e,t,Ce,Me)} +
`}_renderRow(t,e,n){const o=function(t){return"string"==typeof t?t:t.entity}(t),i="string"==typeof t?{entity:t}:t,r=this._rowLabel(o),a=this._expanded.has(e);return B`
${r.text}
{t.stopPropagation(),this._set(e,"entity",t.detail?.value),this.requestUpdate()}} > @@ -1481,7 +1573,7 @@ const Kt=mt(class extends ft{constructor(t){if(super(t),t.type!==ut&&t.type!==dt class="down" .path=${"M11,4H13V16L18.5,10.5L19.92,11.92L12,19.84L4.08,11.92L5.5,10.5L11,16V4Z"} .label=${this._t("editor_move_down")} - .disabled=${e===i-1} + .disabled=${e===n-1} @click=${()=>this._move(e,e+1)} > this._toggle(e)} >
- ${a?this._renderOverrides(o,e):q} -
`}render(){const t=this.entities??[];return V`${t.map((e,i)=>this._renderRow(e,i,t.length))} + ${a?this._renderOverrides(i,e):Z} +
`}render(){const t=this.entities??[];return B`${t.map((e,n)=>this._renderRow(e,n,t.length))} `}}Ur.properties={hass:{attribute:!1},entities:{attribute:!1},unit:{attribute:!1},chartFields:{attribute:!1},_expanded:{state:!0}},Ur.styles=r` + >`}}ca.properties={hass:{attribute:!1},entities:{attribute:!1},unit:{attribute:!1},chartFields:{attribute:!1},_expanded:{state:!0}},ca.styles=r` :host { display: block; } @@ -1559,23 +1651,23 @@ const Kt=mt(class extends ft{constructor(t){if(super(t),t.type!==ut&&t.type!==dt display: block; margin-top: 8px; } - `,customElements.get("cd-entities-editor")||customElements.define("cd-entities-editor",Ur);class Pr extends lt{constructor(){super(...arguments),this._label=t=>ie(this.hass,t),this._computeLabel=t=>ie(this.hass,`editor_${t.name}`),this._computeRuleLabel=t=>ie(this.hass,`editor_rule_${t.name.slice(t.name.indexOf("_")+1)}`)}setConfig(t){this._config=t}connectedCallback(){super.connectedCallback(),async function(){if(!customElements.get("ha-entity-picker")&&"function"==typeof window.loadCardHelpers)try{const t=await window.loadCardHelpers(),e=await t.createCardElement({type:"entities",entities:[]}),i=e?.constructor;await(i?.getConfigElement?.())}catch{}}()}_commit(t){this._config=t,function(t,e){t.dispatchEvent(new CustomEvent("config-changed",{bubbles:!0,composed:!0,detail:{config:e}}))}(this,t)}_formChanged(t,e){if(e.stopPropagation(),!this._config)return;const i=e.detail?.value??{};this._commit(Re(this._config,t,i))}_form(t,e,i){return V`ne(this.hass,t),this._computeLabel=t=>ne(this.hass,`editor_${t.name}`),this._computeRuleLabel=t=>ne(this.hass,`editor_rule_${t.name.slice(t.name.indexOf("_")+1)}`)}setConfig(t){this._config=t}connectedCallback(){super.connectedCallback(),async function(){if(!customElements.get("ha-entity-picker")&&"function"==typeof window.loadCardHelpers)try{const t=await window.loadCardHelpers(),e=await t.createCardElement({type:"entities",entities:[]}),n=e?.constructor;await(n?.getConfigElement?.())}catch{}}()}_commit(t){this._config=t,function(t,e){t.dispatchEvent(new CustomEvent("config-changed",{bubbles:!0,composed:!0,detail:{config:e}}))}(this,t)}_formChanged(t,e){if(e.stopPropagation(),!this._config)return;const n=e.detail?.value??{};this._commit(Re(this._config,t,n))}_form(t,e,n){return B`this._formChanged(i,t)} - >`}_panel(t,e){return V` + @value-changed=${t=>this._formChanged(n,t)} + >`}_panel(t,e){return B`
${e}
- `}_subChanged(t,e){e.stopPropagation(),this._config&&this._commit(ae(this._config,t,e.detail?.value))}_chartFields(){const t=mr[this._config?.style??"bar"];return t&&pr(t)&&this._config?t.entityFields?.(this.hass,this._config):void 0}renderEntities(){return V``}_subChanged(t,e){e.stopPropagation(),this._config&&this._commit(ae(this._config,t,e.detail?.value))}_chartFields(){const t=Br[this._config?.style??"bar"];return t&&Vr(t)&&this._config?t.entityFields?.(this.hass,this._config):void 0}renderEntities(){return B`this._subChanged(["entities"],t)} > - ${this._ruleForm("include")} ${this._ruleForm("exclude")}`}_ruleData(t){const e=this._config?.[t],i={};if(!e||"object"!=typeof e)return i;for(const[n,o]of Object.entries(e))i[`${t}_${n}`]=Array.isArray(o)?o:[o];return i}_ruleChanged(t,e){if(e.stopPropagation(),!this._config)return;const i=e.detail?.value??{},n=this._ruleData(t);let o=this._config;for(const r of Ne[t]){const e=`${t}_${r}`,a=Array.isArray(i[e])?i[e]:[];Fe(n[e]??[],a)||(o=ae(o,[t,r],a.length?a:void 0))}o!==this._config&&this._commit(o)}_ruleForm(t){return V`
${this._label(`editor_${t}_heading`)}
+ ${this._ruleForm("include")} ${this._ruleForm("exclude")}`}_ruleData(t){const e=this._config?.[t],n={};if(!e||"object"!=typeof e)return n;for(const[o,i]of Object.entries(e))n[`${t}_${o}`]=Array.isArray(i)?i:[i];return n}_ruleChanged(t,e){if(e.stopPropagation(),!this._config)return;const n=e.detail?.value??{},o=this._ruleData(t);let i=this._config;for(const r of Ne[t]){const e=`${t}_${r}`,a=Array.isArray(n[e])?n[e]:[];Fe(o[e]??[],a)||(i=ae(i,[t,r],a.length?a:void 0))}i!==this._config&&this._commit(i)}_ruleForm(t){return B`
${this._label(`editor_${t}_heading`)}

${this._label(`editor_${t}_help`)}

this._ruleChanged(t,e)} - >`}renderLimits(){return[["min","0"],["max","100"],["target",this._label("editor_none")]].map(([t,e])=>V``}renderLimits(){return[["min","0"],["max","100"],["target",this._label("editor_none")]].map(([t,e])=>B`this._subChanged([t],e)} - >`)}renderColours(){return V`${this._toggles(ge)}`)}renderColours(){return B`${this._toggles(ge)}this._subChanged(["severity"],t)} - >`}_firstEntityUnit(){const t=this._config?.entities?.[0];return"string"==typeof t?Nr(this.hass,t):t?.unit??Nr(this.hass,t?.entity,t?.attribute)}_selectStyle(t){this._config&&this._commit(ae(this._config,["style"],"bar"===t?void 0:t))}renderStyle(){const t=this._config?.style??"bar";return V`${ur.map(e=>{const i=Bt.filter(t=>mr[t].group===e);return i.length?V`
${this._label(`editor_group_${e}`)}
+ >`}_firstEntityUnit(){const t=this._config?.entities?.[0];return"string"==typeof t?la(this.hass,t):t?.unit??la(this.hass,t?.entity,t?.attribute)}_selectStyle(t){this._config&&this._commit(ae(this._config,["style"],"bar"===t?void 0:t))}renderStyle(){const t=this._config?.style??"bar";return B`${Rr.map(e=>{const n=Vt.filter(t=>Br[t].group===e);return n.length?B`
${this._label(`editor_group_${e}`)}
- ${i.map(e=>{const i=mr[e],n=pr(i)?V``:Ge(e);return V``})} -
`:q})}`}renderChart(){const t=mr[this._config?.style??"bar"];return t&&pr(t)&&t.editor&&this._config?this._panel("chart",t.editor({hass:this.hass,config:this._config,commit:t=>this._commit(t)})):q}renderDisplay(){return V`${this._toggles(fe)} - ${this._form("display",function(t){const e=ee(t);return je?.language!==e&&(je={language:e,schema:Le(t)}),je.schema}(this.hass),_e)}`}_toggles(t){const e=De(this._config,t);return V`
- ${t.map(({name:i})=>{const n=this._label(`editor_${i}`),o=!0===e[i];return V`
- this._toggle(t,i,!o)}>${n}`:Z})}`}renderChart(){const t=Br[this._config?.style??"bar"];return t&&Vr(t)&&t.editor&&this._config?this._panel("chart",t.editor({hass:this.hass,config:this._config,commit:t=>this._commit(t)})):Z}renderDisplay(){return B`${this._toggles(fe)} + ${this._form("display",function(t){const e=ee(t);return Pe?.language!==e&&(Pe={language:e,schema:Le(t)}),Pe.schema}(this.hass),ye)}`}_toggles(t){const e=De(this._config,t);return B`
+ ${t.map(({name:n})=>{const o=this._label(`editor_${n}`),i=!0===e[n];return B`
+ this._toggle(t,n,!i)}>${o}this._toggle(t,i,e.target.checked)} + data-name=${n} + aria-label=${o} + .checked=${Kt(i)} + @change=${e=>this._toggle(t,n,e.target.checked)} >
`})} -
`}_toggle(t,e,i){if(!this._config)return;const n=De(this._config,t);this._commit(Re(this._config,t,{...n,[e]:i}))}renderActions(){return this._form("actions",Ce,ye)}render(){return this._config?V`
${this._form("title",Me,me)}
+
`}_toggle(t,e,n){if(!this._config)return;const o=De(this._config,t);this._commit(Re(this._config,t,{...o,[e]:n}))}renderActions(){return this._form("actions",Ce,_e)}render(){return this._config?B`
${this._form("title",Ae,me)}
${this._panel("entities",this.renderEntities())} ${this._panel("style",this.renderStyle())} ${this.renderChart()} ${this._panel("limits",this.renderLimits())} ${this._panel("colours",this.renderColours())} ${this._panel("display",this.renderDisplay())} - ${this._panel("actions",this.renderActions())}`:q}}Pr.properties={hass:{attribute:!1},_config:{state:!0}},Pr.styles=r` + ${this._panel("actions",this.renderActions())}`:Z}}da.properties={hass:{attribute:!1},_config:{state:!0}},da.styles=r` :host { display: block; } @@ -1704,7 +1796,7 @@ const Kt=mt(class extends ft{constructor(t){if(super(t),t.type!==ut&&t.type!==dt outline-offset: -1px; border-color: transparent; } - `,customElements.get("chartdeck-card-editor")||customElements.define("chartdeck-card-editor",Pr);const zr=r` + `,customElements.get("chartdeck-card-editor")||customElements.define("chartdeck-card-editor",da);const ha=r` :host { display: block; --cd-duration: 900ms; @@ -1807,35 +1899,35 @@ const Kt=mt(class extends ft{constructor(t){if(super(t),t.type!==ut&&t.type!==dt border-radius: 50%; flex: none; } -`;console.info("%c CHARTDECK %c 1.2.0 ","color:#fff;background:#3b8bff;font-weight:700","color:#3b8bff");const jr={rows:16,tiles:8};function Hr(t){const e=jr[t.layout];return Math.max(1,Math.floor((368+e)/((t.minColumnWidth??0)+e)))}class Fr extends lt{constructor(){super(...arguments),this._watched=new Set,this._matched=[],this._items=[],this._detachers=new Map,this._readyScheduled=!1,this._readyAt=-1/0}static getStubConfig(t){const e=Object.values(t?.states??{}).filter(t=>t.entity_id.startsWith("sensor.")&&""!==t.state.trim()&&Number.isFinite(Number(t.state))),i=t=>"battery"===t.attributes?.device_class;return e.sort((t,e)=>i(t)!==i(e)?i(t)?-1:1:t.entity_ide.entity_id?1:0),{type:"custom:chartdeck-card",style:"bar",entities:e.slice(0,3).map(t=>t.entity_id)}}static getConfigElement(){return document.createElement("chartdeck-card-editor")}setConfig(t){const e=function(t){if(!t||"object"!=typeof t)throw new Error("Invalid configuration");const e=t.style??"bar";if(!Bt.includes(e))throw new Error(`Unknown style "${String(e)}". Use one of: ${Bt.join(", ")}`);const i=t.sort??"none";if(!It.includes(i))throw new Error(`Unknown sort "${String(i)}". Use one of: ${It.join(", ")}`);if(void 0!==t.entities&&!Array.isArray(t.entities))throw new Error('"entities" must be a list');const n=(t.entities??[]).map((e,i)=>Jt(e,t,i)),o={name:!0,value:!0,icon:!0,target:!0,legend:!1,...t.show},r=Zt(t.columns,"columns",1),a=Zt(t.limit,"limit",1),s=Pt(t.include,"include"),l=Pt(t.exclude,"exclude");s&&Jt("sensor.chartdeck_check",t,0);const c={style:e,entities:n,hideUnavailable:!0===t.hide_unavailable,cardOptions:t,show:o,sort:i,animate:!1!==t.animate,colorIcon:!0===t.color_icon,legendBands:Gt(t.severity)??Vt};return void 0!==t.title&&(c.title=t.title),void 0!==r&&(c.columns=r),void 0!==a&&(c.limit=a),s&&(c.include=s),l&&(c.exclude=l),c}(t),i=mr[e.style];if(pr(i)&&i.validate?.(t),this._watched=function(t){const e=new Set;for(const i of t.entities){e.add(i.entity);for(const t of[i.min,i.max,i.target,...i.severity.map(t=>t.from)])"string"==typeof t&&""!==t&&e.add(t)}for(const i of t.legendBands)"string"==typeof i.from&&e.add(i.from);return e}(e),pr(i))for(const n of i.watch?.(t)??[])this._watched.add(n);this._config&&this._config.style!==e.style&&this._disconnectStyle(),this._config=e}get _styleName(){return this._config?.style??"bar"}get _style(){return mr[this._styleName]}_legend(t){const e=this._config;if(!e?.show.legend||0===this._count())return[];const i=t?.decimals??1;return function(t,e,i){const n=i?` ${i}`:"",o=[];return t.forEach((i,r)=>{const a=t[r+1],s=Et(i.color);i.label?o.push({color:s,text:i.label}):Number.isFinite(i.from)?a?o.push({color:s,text:`${e(i.from)}–${e(a.from)}${n}`}):o.push({color:s,text:`${e(i.from)}${n}+`}):a&&o.push({color:s,text:`< ${e(a.from)}${n}`})}),o}(zo(e.legendBands,this.hass),t=>Un(t,i,this.hass),t?.unit??"")}_count(){return this.hasUpdated&&this.hass?this._items.length:this._config?.entities.length??0}_contentHeight(){const t=this._config;if(!t)return 0;const e=this._style,i=16+(t.title?73:0)+(this._legend().length>0?32:0);if(pr(e))return i+e.height;const n=this._count(),o=void 0!==t.columns?Math.min(t.columns,Hr(e)):"rows"===e.layout?1:Math.min(n,e.tilesPerRow??3,Hr(e));return i+(0===n?0:Math.ceil(n/Math.max(1,o)))*e.height}getCardSize(){return Math.max(1,Math.ceil(this._contentHeight()/50))}getGridOptions(){const t=this._count();if(pr(this._style))return{columns:12,rows:"auto",min_columns:6,min_rows:2};const e="rows"===this._style.layout;return{columns:e||t<=1?6:12,rows:"auto",min_columns:e?6:3,min_rows:1}}shouldUpdate(t){if(0===t.size)return!0;if([...t.keys()].some(t=>"hass"!==t))return!0;if(!t.has("hass"))return!1;const e=t.get("hass"),i=this.hass;if(!e||!i)return!0;for(const n of this._watched)if(e.states[n]!==i.states[n])return!0;if(this._config?.include){const t=Ho(this._config,i);if(t.length!==this._matched.length||t.some((t,e)=>t!==this._matched[e]))return!0;for(const n of t)if(e.states[n]!==i.states[n])return!0}return e.themes?.darkMode!==i.themes?.darkMode||e.themes?.theme!==i.themes?.theme||e.locale!==i.locale}willUpdate(){const t=!1===this._config?.animate||"function"==typeof window.matchMedia&&!!window.matchMedia("(prefers-reduced-motion: reduce)")?.matches;this.toggleAttribute("static",t),(t||this.preview)&&this.setAttribute("ready","")}_scheduleReady(){if(this._readyScheduled||this.hasAttribute("ready")||0===this._items.length)return;this._readyScheduled=!0;const t=()=>{this.shadowRoot?.querySelector(".entity")?.getBoundingClientRect(),this.setAttribute("ready",""),this._readyAt=performance.now()};"function"==typeof requestAnimationFrame?requestAnimationFrame(t):setTimeout(t,16)}updated(){this._scheduleReady(),this._syncActions()}connectedCallback(){if(super.connectedCallback(),!this.hasUpdated)return;const t=this._config?mr[this._config.style]:void 0;t&&pr(t)&&this.requestUpdate(),this._syncActions(),this.hasAttribute("ready")&&!this.hasAttribute("static")&&performance.now()-this._readyAt<1e3&&(this.removeAttribute("ready"),this._readyScheduled=!1,this._scheduleReady())}_disconnectStyle(){const t=this._config?mr[this._config.style]:void 0;t&&pr(t)&&t.disconnect?.(this)}disconnectedCallback(){super.disconnectedCallback(),this._disconnectStyle();for(const t of this._detachers.values())t();this._detachers.clear()}_syncActions(){const t=this.shadowRoot;if(!t)return;const e=new Set(t.querySelectorAll(".entity"));for(const[i,n]of this._detachers)e.has(i)||(n(),this._detachers.delete(i));for(const i of e)this._detachers.has(i)||this._detachers.set(i,Ct(i,()=>this._items[Number(i.dataset.index)].config))}_renderEntity(t,e,i,n){const o=this._config,r=(a=t.config,Mt(a.tap_action)||Mt(a.hold_action)||Mt(a.double_tap_action));var a;const s=function(t){const e=Et(t);return{start:e,end:`color-mix(in srgb, ${e} 80%, #fff)`}}(t.band.color),l=`--start:${t.span[0]};--end:${t.span[1]};--pos:${t.position};--target:${t.targetPosition??0};--c-start:${s.start};--c-end:${s.end}`;return V`
t.entity_id.startsWith("sensor.")&&""!==t.state.trim()&&Number.isFinite(Number(t.state))),n=t=>"battery"===t.attributes?.device_class;return e.sort((t,e)=>n(t)!==n(e)?n(t)?-1:1:t.entity_ide.entity_id?1:0),{type:"custom:chartdeck-card",style:"bar",entities:e.slice(0,3).map(t=>t.entity_id)}}static getConfigElement(){return document.createElement("chartdeck-card-editor")}setConfig(t){const e=function(t){if(!t||"object"!=typeof t)throw new Error("Invalid configuration");const e=t.style??"bar";if(!Vt.includes(e))throw new Error(`Unknown style "${String(e)}". Use one of: ${Vt.join(", ")}`);const n=t.sort??"none";if(!It.includes(n))throw new Error(`Unknown sort "${String(n)}". Use one of: ${It.join(", ")}`);if(void 0!==t.entities&&!Array.isArray(t.entities))throw new Error('"entities" must be a list');const o=(t.entities??[]).map((e,n)=>Jt(e,t,n)),i={name:!0,value:!0,icon:!0,target:!0,legend:!1,...t.show},r=qt(t.columns,"columns",1),a=qt(t.limit,"limit",1),s=jt(t.include,"include"),l=jt(t.exclude,"exclude");s&&Jt("sensor.chartdeck_check",t,0);const c={style:e,entities:o,hideUnavailable:!0===t.hide_unavailable,cardOptions:t,show:i,sort:n,animate:!1!==t.animate,colorIcon:!0===t.color_icon,legendBands:Yt(t.severity)??Bt};return void 0!==t.title&&(c.title=t.title),void 0!==r&&(c.columns=r),void 0!==a&&(c.limit=a),s&&(c.include=s),l&&(c.exclude=l),c}(t),n=Br[e.style];if(Vr(n)&&n.validate?.(t),this._watched=function(t){const e=new Set;for(const n of t.entities){e.add(n.entity);for(const t of[n.min,n.max,n.target,...n.severity.map(t=>t.from)])"string"==typeof t&&""!==t&&e.add(t)}for(const n of t.legendBands)"string"==typeof n.from&&e.add(n.from);return e}(e),Vr(n))for(const o of n.watch?.(t)??[])this._watched.add(o);this._config&&this._config.style!==e.style&&this._disconnectStyle(),this._config=e}get _styleName(){return this._config?.style??"bar"}get _style(){return Br[this._styleName]}_legend(t){const e=this._config;if(!e?.show.legend||0===this._count())return[];const n=t?.decimals??1;return function(t,e,n){const o=n?` ${n}`:"",i=[];return t.forEach((n,r)=>{const a=t[r+1],s=Et(n.color);n.label?i.push({color:s,text:n.label}):Number.isFinite(n.from)?a?i.push({color:s,text:`${e(n.from)}–${e(a.from)}${o}`}):i.push({color:s,text:`${e(n.from)}${o}+`}):a&&i.push({color:s,text:`< ${e(a.from)}${o}`})}),i}(Wi(e.legendBands,this.hass),t=>Po(t,n,this.hass),t?.unit??"")}_count(){return this.hasUpdated&&this.hass?this._items.length:this._config?.entities.length??0}_contentHeight(){const t=this._config;if(!t)return 0;const e=this._style,n=16+(t.title?73:0)+(this._legend().length>0?32:0);if(Vr(e))return n+e.height;const o=this._count(),i=void 0!==t.columns?Math.min(t.columns,pa(e)):"rows"===e.layout?1:Math.min(o,e.tilesPerRow??3,pa(e));return n+(0===o?0:Math.ceil(o/Math.max(1,i)))*e.height}getCardSize(){return Math.max(1,Math.ceil(this._contentHeight()/50))}getGridOptions(){const t=this._count();if(Vr(this._style))return{columns:12,rows:"auto",min_columns:6,min_rows:2};const e="rows"===this._style.layout;return{columns:e||t<=1?6:12,rows:"auto",min_columns:e?6:3,min_rows:1}}shouldUpdate(t){if(0===t.size)return!0;if([...t.keys()].some(t=>"hass"!==t))return!0;if(!t.has("hass"))return!1;const e=t.get("hass"),n=this.hass;if(!e||!n)return!0;for(const o of this._watched)if(e.states[o]!==n.states[o])return!0;if(this._config?.include){const t=qi(this._config,n);if(t.length!==this._matched.length||t.some((t,e)=>t!==this._matched[e]))return!0;for(const o of t)if(e.states[o]!==n.states[o])return!0}return e.themes?.darkMode!==n.themes?.darkMode||e.themes?.theme!==n.themes?.theme||e.locale!==n.locale}willUpdate(){const t=!1===this._config?.animate||"function"==typeof window.matchMedia&&!!window.matchMedia("(prefers-reduced-motion: reduce)")?.matches;this.toggleAttribute("static",t),(t||this.preview)&&this.setAttribute("ready","")}_scheduleReady(){if(this._readyScheduled||this.hasAttribute("ready")||0===this._items.length)return;this._readyScheduled=!0;const t=()=>{this.shadowRoot?.querySelector(".entity")?.getBoundingClientRect(),this.setAttribute("ready",""),this._readyAt=performance.now()};"function"==typeof requestAnimationFrame?requestAnimationFrame(t):setTimeout(t,16)}updated(){this._scheduleReady(),this._syncActions()}connectedCallback(){if(super.connectedCallback(),!this.hasUpdated)return;const t=this._config?Br[this._config.style]:void 0;t&&Vr(t)&&this.requestUpdate(),this._syncActions(),this.hasAttribute("ready")&&!this.hasAttribute("static")&&performance.now()-this._readyAt<1e3&&(this.removeAttribute("ready"),this._readyScheduled=!1,this._scheduleReady())}_disconnectStyle(){const t=this._config?Br[this._config.style]:void 0;t&&Vr(t)&&t.disconnect?.(this)}disconnectedCallback(){super.disconnectedCallback(),this._disconnectStyle();for(const t of this._detachers.values())t();this._detachers.clear()}_syncActions(){const t=this.shadowRoot;if(!t)return;const e=new Set(t.querySelectorAll(".entity"));for(const[n,o]of this._detachers)e.has(n)||(o(),this._detachers.delete(n));for(const n of e)this._detachers.has(n)||this._detachers.set(n,Ct(n,()=>this._items[Number(n.dataset.index)].config))}_renderEntity(t,e,n,o){const i=this._config,r=(a=t.config,At(a.tap_action)||At(a.hold_action)||At(a.double_tap_action));var a;const s=function(t){const e=Et(t);return{start:e,end:`color-mix(in srgb, ${e} 80%, #fff)`}}(t.band.color),l=`--start:${t.span[0]};--end:${t.span[1]};--pos:${t.position};--target:${t.targetPosition??0};--c-start:${s.start};--c-end:${s.end}`;return B`
- ${i.render(t,{show:o.show,hass:n})} -
`}render(){const t=this._config;if(!t)return q;const e=this.hass,i=this._style;let n,o,r;const a=e?function(t,e){const i=Ho(t,e).map((e,i)=>Jt(e,t.cardOptions,i)),n=[...t.entities,...i].map(t=>jo(t,e));return t.hideUnavailable?n.filter(t=>t.available):n}(t,e):[];if(this._matched=e?Ho(t,e):[],0!==t.entities.length||t.include)if(e)if(0===a.length)this._items=[],n=V`
${ie(e,t.include?"no_matches":"none_available")}
`;else{o=a[0];const s=new Map,l=new Set;a.forEach((t,e)=>{s.set(t,l.has(t.entityId)?`${t.entityId}#${e}`:t.entityId),l.add(t.entityId)}),this._items=function(t,e){if("none"===e)return[...t];const i="ascending"===e?1:-1;return t.map((t,e)=>({item:t,index:e})).sort((t,e)=>{if(t.item.available!==e.item.available)return t.item.available?-1:1;if(t.item.available){const n=(t.item.position-e.item.position)*i;if(0!==n)return n}return t.index-e.index}).map(t=>t.item)}(a,t.sort).slice(0,t.limit);const c=this._items.filter(t=>t.available).map(t=>t.display.length);if(r=c.length?Math.max(...c):void 0,pr(i))n=V`
- ${i.render({items:this._items,config:t,raw:t.cardOptions,hass:e,requestUpdate:()=>this.requestUpdate(),host:this})} -
`;else{const o="tiles"===i.layout,r=function(t,e){if(void 0===e)return"rows"===t.layout?"grid-template-columns: repeat(1, minmax(0, 1fr))":"";const i=(e-1)*jr[t.layout];return`grid-template-columns: repeat(auto-fill, minmax(max(min(${t.minColumnWidth??0}px, 100%), calc((100% - ${i}px) / ${e} - 0.5px)), 1fr))`}(i,t.columns);n=V`
`}render(){const t=this._config;if(!t)return Z;const e=this.hass,n=this._style;let o,i,r;const a=e?function(t,e){const n=qi(t,e).map((e,n)=>Jt(e,t.cardOptions,n)),o=[...t.entities,...n].map(t=>Zi(t,e));return t.hideUnavailable?o.filter(t=>t.available):o}(t,e):[];if(this._matched=e?qi(t,e):[],0!==t.entities.length||t.include)if(e)if(0===a.length)this._items=[],o=B`
${ne(e,t.include?"no_matches":"none_available")}
`;else{i=a[0];const s=new Map,l=new Set;a.forEach((t,e)=>{s.set(t,l.has(t.entityId)?`${t.entityId}#${e}`:t.entityId),l.add(t.entityId)}),this._items=function(t,e){if("none"===e)return[...t];const n="ascending"===e?1:-1;return t.map((t,e)=>({item:t,index:e})).sort((t,e)=>{if(t.item.available!==e.item.available)return t.item.available?-1:1;if(t.item.available){const o=(t.item.position-e.item.position)*n;if(0!==o)return o}return t.index-e.index}).map(t=>t.item)}(a,t.sort).slice(0,t.limit);const c=this._items.filter(t=>t.available).map(t=>t.display.length);if(r=c.length?Math.max(...c):void 0,Vr(n))o=B`
+ ${n.render({items:this._items,config:t,raw:t.cardOptions,hass:e,requestUpdate:()=>this.requestUpdate(),host:this})} +
`;else{const i="tiles"===n.layout,r=function(t,e){if(void 0===e)return"rows"===t.layout?"grid-template-columns: repeat(1, minmax(0, 1fr))":"";const n=(e-1)*ua[t.layout];return`grid-template-columns: repeat(auto-fill, minmax(max(min(${t.minColumnWidth??0}px, 100%), calc((100% - ${n}px) / ${e} - 0.5px)), 1fr))`}(n,t.columns);o=B`
- ${At(this._items,t=>s.get(t),(t,n)=>this._renderEntity(t,n,i,e))} -
`}}else this._items=[],n=q;else this._items=[],n=V`
${ie(e,"no_entities")}
`;const s=this._legend(o);return V` + ${Mt(this._items,t=>s.get(t),(t,o)=>this._renderEntity(t,o,n,e))} +
`}}else this._items=[],o=Z;else this._items=[],o=B`
${ne(e,"no_entities")}
`;const s=this._legend(i);return B`
- ${n} + ${o}
- ${s.length?V`
- ${s.map(t=>V` + ${s.map(t=>B`${t.text}`)} -
`:q} - `}}Fr.properties={hass:{attribute:!1},preview:{type:Boolean},_config:{state:!0}},Fr.styles=[zr,...Object.values(mr).map(t=>t.styles)],customElements.get("chartdeck-card")||customElements.define("chartdeck-card",Fr);const Dr=window.customCards??=[];Dr.some(t=>"chartdeck-card"===t.type)||Dr.push({type:"chartdeck-card",name:"Chartdeck",description:"Bars, gauges and charts, set up entirely from the visual editor.",preview:!0,documentationURL:"https://tempus2016.github.io/chartdeck/"});export{Fr as ChartdeckCard}; +
`:Z} + `}}ma.properties={hass:{attribute:!1},preview:{type:Boolean},_config:{state:!0}},ma.styles=[ha,...Object.values(Br).map(t=>t.styles)],customElements.get("chartdeck-card")||customElements.define("chartdeck-card",ma);const fa=window.customCards??=[];fa.some(t=>"chartdeck-card"===t.type)||fa.push({type:"chartdeck-card",name:"Chartdeck",description:"Bars, gauges and charts, set up entirely from the visual editor.",preview:!0,documentationURL:"https://tempus2016.github.io/chartdeck/"});export{ma as ChartdeckCard}; diff --git a/src/chart/columns.ts b/src/chart/columns.ts new file mode 100644 index 0000000..afa0aba --- /dev/null +++ b/src/chart/columns.ts @@ -0,0 +1,152 @@ +import type { ResolvedEntity } from '../resolve'; +import { parsePeriod } from '../history/period'; +import type { Period } from '../history/period'; +import type { GroupUnit } from '../history/group'; +import type { Point } from '../history/types'; +import type { CardConfig } from '../types'; +import { valueAt } from './stack'; + +/** + * Column maths: which grouping a column chart uses when none is set, how readings line up into + * slots (one per group, or per reading), and where each series' column sits in its slot. + */ + +/** Grouping choices a column chart offers: `auto` picks one for the span, `none` draws each reading. */ +export const COLUMN_GROUPS = ['auto', 'none', 'hour', 'day', 'week', 'month'] as const; +export const COLUMN_AGGREGATES = ['auto', 'mean', 'sum', 'min', 'max', 'first', 'last', 'change'] as const; + +/** A column chart with no period shows the last 7 days: with automatic grouping, a column a day. */ +export const COLUMN_PERIOD = { last: 7, unit: 'day' } as const; + +const PERIOD_DAYS = { hour: 1 / 24, day: 1, week: 7, month: 30 } as const; + +/** + * The group a span reads best in: hours for up to two days, days up to about two months, weeks + * up to half a year, then months. Calendar spans: today by hour, a week or month by day, a year + * by month. + */ +export function autoGroupUnit(period: Period): GroupUnit { + if (period.calendar) return ({ day: 'hour', week: 'day', month: 'day', year: 'month' } as const)[period.calendar]; + const days = period.last * PERIOD_DAYS[period.unit]; + if (days <= 2) return 'hour'; + if (days <= 62) return 'day'; + if (days <= 190) return 'week'; + return 'month'; +} + +/** A meter that counts up (energy, water, gas): its columns should show how much it went up. */ +export function isMeter(e: ResolvedEntity): boolean { + if (e.config.attribute) return false; + const stateClass = e.stateObj?.attributes?.state_class; + return stateClass === 'total_increasing' || stateClass === 'total'; +} + +/** + * The card config the shared history frame should read: the column chart's own defaults filled + * in. No period means the last 7 days; `group_by` auto (or unset) picks a unit for the span, and + * `none` draws one column per reading; `aggregate` auto (or unset) is the change of meters when + * every entity is one (energy per day), else the average. Range columns always use the average. + */ +export function columnRaw(raw: CardConfig, items: readonly ResolvedEntity[]): CardConfig { + const out: Record = { ...raw, period: raw.period ?? { ...COLUMN_PERIOD } }; + if (raw.group_by === 'none') { + delete out.group_by; + } else if (raw.group_by === undefined || raw.group_by === 'auto') { + out.group_by = autoGroupUnit(parsePeriod(out.period as CardConfig['period'])); + } + if (raw.aggregate === undefined || raw.aggregate === 'auto') { + out.aggregate = raw.range !== true && items.length > 0 && items.every(isMeter) ? 'change' : 'mean'; + } + return out as CardConfig; +} + +/** Every series' readings at one shared set of slots. */ +export interface ColumnTable { + /** Slot starts, in order. */ + times: number[]; + /** Where each slot ends (the next slot's start, a group's end, or the range's end). */ + ends: number[]; + /** Per series, its value in each slot: its reading then, or the one it held. */ + values: (number | null)[][]; + /** Per series, each slot's lowest and highest (statistics, or a grouped range); null if unknown. */ + lows: (number | null)[][]; + highs: (number | null)[][]; +} + +/** + * Line series up into slots. Grouped points already share their times; readings that don't are + * read at every time any series has one (a value holds until it changes). A slot ends at its + * group's end, else at the next slot, else at `end`; one with no width (the reading carried to + * the right edge) is dropped. + */ +export function columnTable(series: readonly (readonly Point[])[], end: number): ColumnTable { + const all = [...new Set(series.flatMap((points) => points.map((p) => p.t)))].sort((a, b) => a - b); + const exact = series.map((points) => new Map(points.map((p) => [p.t, p]))); + const groupEnd = new Map(); + for (const points of series) for (const p of points) if (p.end !== undefined) groupEnd.set(p.t, p.end); + const table: ColumnTable = { + times: [], + ends: [], + values: series.map(() => []), + lows: series.map(() => []), + highs: series.map(() => []), + }; + all.forEach((t, i) => { + const slotEnd = Math.min(groupEnd.get(t) ?? all[i + 1] ?? end, end); + if (!(slotEnd > t)) return; + table.times.push(t); + table.ends.push(slotEnd); + series.forEach((points, k) => { + const p = exact[k].get(t); + table.values[k].push(p ? p.v : valueAt(points, t)); + table.lows[k].push(p?.min ?? null); + table.highs[k].push(p?.max ?? null); + }); + }); + return table; +} + +/** Share of a slot left empty, split either side, so neighbouring slots don't touch. */ +export const SLOT_GAP = 0.2; +/** Share of a series' column width left between columns side by side in one slot. */ +export const SERIES_GAP = 0.12; + +/** + * Where column `k` of `n` side by side sits in a slot from `x0` to `x1` (plot units): its left + * edge and width. One column (or a stack) takes the slot's middle 80 %. + */ +export function columnBox(x0: number, x1: number, k: number, n: number): [left: number, width: number] { + const w = x1 - x0; + const inner = w * (1 - SLOT_GAP); + const each = inner / n; + const pad = n > 1 ? each * SERIES_GAP : 0; + return [x0 + (w * SLOT_GAP) / 2 + k * each + pad / 2, each - pad]; +} + +/** + * Value-axis ends to fix so columns stand on zero: readings all at or above zero start the axis + * at zero, all at or below end it there. Ends the user set always win. + */ +export function zeroBased(data: [number, number], raw: CardConfig): CardConfig { + const out: Record = { ...raw }; + if (raw.y_min === undefined && data[0] >= 0) out.y_min = 0; + if (raw.y_max === undefined && data[1] <= 0) out.y_max = 0; + return out as CardConfig; +} + +/** Lowest and highest of some numbers (nulls skipped), with zero in unless `zero` is false. */ +export function spread(values: Iterable, zero = true): [number, number] | undefined { + let lo = zero ? 0 : Infinity; + let hi = zero ? 0 : -Infinity; + for (const v of values) { + if (v === null || !Number.isFinite(v)) continue; + lo = Math.min(lo, v); + hi = Math.max(hi, v); + } + return lo === Infinity ? undefined : [lo, hi]; +} + +/** The time labels to keep so about `fit` of `count` show: every first, every second, … */ +export function labelEvery(count: number, fit: number): number { + return Math.max(1, Math.ceil(count / Math.max(1, fit))); +} diff --git a/src/chart/frame.ts b/src/chart/frame.ts index 7700f43..ebca92f 100644 --- a/src/chart/frame.ts +++ b/src/chart/frame.ts @@ -90,8 +90,14 @@ export function validateHistoryOptions(raw: CardConfig): void { } } +/** What a chart asks of its history beyond the readings. */ +export interface FrameOptions { + /** Keep each group's lowest and highest (`min`, `max` on its point), for range charts. */ + range?: boolean; +} + /** Load (or reuse) the card's history and pair it with its entities. */ -export function historyFrame(ctx: ChartContext, now = Date.now()): HistoryFrame { +export function historyFrame(ctx: ChartContext, now = Date.now(), options: FrameOptions = {}): HistoryFrame { const period = parsePeriod(ctx.raw.period as CardConfig['period']); const source: Source = (ctx.raw.source as Source | undefined) ?? 'history'; const zone = zoneFor(ctx.hass); @@ -102,7 +108,9 @@ export function historyFrame(ctx: ChartContext, now = Date.now()): HistoryFrame const requests = ctx.items.map((e) => ({ entity: e.entityId, attribute: e.config.attribute })); const store = storeFor(ctx.host, ctx.requestUpdate); const statistics = - group && source === 'statistics' ? statisticsQueryFor(group, zone, ctx.hass.config?.time_zone) : undefined; + group && source === 'statistics' + ? statisticsQueryFor(group, zone, ctx.hass.config?.time_zone, options.range === true) + : undefined; // Statistics groups load from one row early: the row before a group gives its `first`. const load = statistics ? { start: range.start - PERIOD_MS[statistics.period], end: range.end } : range; const loaded = store.get(ctx.hass, requests, load, source, { live: span.live, statistics }); @@ -117,8 +125,8 @@ export function historyFrame(ctx: ChartContext, now = Date.now()): HistoryFrame if (group) { points = source === 'statistics' - ? groupStatistics(points, bounds, group.aggregate, until) - : groupHistory(points, bounds, group.aggregate, until); + ? groupStatistics(points, bounds, group.aggregate, until, options.range === true) + : groupHistory(points, bounds, group.aggregate, until, options.range === true); } else if (source === 'history' && last && last.v !== null && last.t < until) { // A sensor holds its last reading until it changes, so carry it on to the right edge. points = [...points, { t: until, v: last.v }]; diff --git a/src/chart/grid.ts b/src/chart/grid.ts index 6f84e93..a4de65d 100644 --- a/src/chart/grid.ts +++ b/src/chart/grid.ts @@ -72,6 +72,8 @@ export interface PlotAxes { unit: TimeUnit; range: Range; scales: PlotScales; + /** The text under each time label, when a chart names its own (a column's day); else the time's. */ + label?: (t: number) => string; } /** Work out the axes for readings spanning `data` over `range`, sized to the card. */ @@ -126,7 +128,7 @@ function timeLabels(axes: PlotAxes, ctx: ChartContext) { // Labels near an edge line up with it instead of centring off the chart. const edge = left < 0.05 ? 'start' : left > 0.95 ? 'end' : ''; return html`${timeLabel(t, axes.unit, range.end - range.start, ctx.hass, offset)}${axes.label ? axes.label(t) : timeLabel(t, axes.unit, range.end - range.start, ctx.hass, offset)}`; }); } diff --git a/src/history/group.ts b/src/history/group.ts index b131f5e..5539bd1 100644 --- a/src/history/group.ts +++ b/src/history/group.ts @@ -78,7 +78,13 @@ export function increments(points: Point[]): (number | null)[] { * * A group with no value held at any time in it is a gap. For sum, a group with no readings is. */ -export function groupHistory(points: Point[], bounds: number[], aggregate: Aggregate, until: number): Point[] { +export function groupHistory( + points: Point[], + bounds: number[], + aggregate: Aggregate, + until: number, + range = false, +): Point[] { const ups = aggregate === 'change' ? increments(points) : []; const out: Point[] = []; // Index of the first point at or after the group's start. @@ -112,6 +118,11 @@ export function groupHistory(points: Point[], bounds: number[], aggregate: Aggre }[]; if (known.length === 0) continue; const values = known.map((h) => h.v); + if (range) { + // The group's spread, for range charts: every value that held in it. + group.min = Math.min(...values); + group.max = Math.max(...values); + } switch (aggregate) { case 'mean': { const time = known.reduce((a, h) => a + h.dt, 0); @@ -153,7 +164,13 @@ export function groupHistory(points: Point[], bounds: number[], aggregate: Aggre * reading at the group's start), or the group's first row when there is none. A group that starts * after `until` (now) is a gap whatever the server sent. */ -export function groupStatistics(rows: Point[], bounds: number[], aggregate: Aggregate, until = Infinity): Point[] { +export function groupStatistics( + rows: Point[], + bounds: number[], + aggregate: Aggregate, + until = Infinity, + range = false, +): Point[] { const out: Point[] = []; let j = 0; for (let i = 0; i + 1 < bounds.length; i++) { @@ -162,8 +179,16 @@ export function groupStatistics(rows: Point[], bounds: number[], aggregate: Aggr while (j < rows.length && rows[j].t < start) j++; let k = j; const values: number[] = []; + const lows: number[] = []; + const highs: number[] = []; // A row moved to the range's start is the previous period's: only `first` wants it. - for (; k < rows.length && rows[k].t < end; k++) if (rows[k].v !== null && !rows[k].carried) values.push(rows[k].v!); + for (; k < rows.length && rows[k].t < end; k++) { + const row = rows[k]; + if (row.v === null || row.carried) continue; + values.push(row.v); + lows.push(row.min ?? row.v); + highs.push(row.max ?? row.v); + } let v: number | null = null; if (values.length && start < until) { if (aggregate === 'mean') v = values.reduce((a, x) => a + x, 0) / values.length; @@ -180,7 +205,13 @@ export function groupStatistics(rows: Point[], bounds: number[], aggregate: Aggr v = (prior ?? carried)?.v ?? values[0]; } } - out.push({ t: start, end, v }); + const group: Point = { t: start, end, v }; + // The group's spread, for range charts: lowest of the rows' lows to highest of their highs. + if (range && v !== null) { + group.min = Math.min(...lows); + group.max = Math.max(...highs); + } + out.push(group); } return out; } @@ -216,8 +247,12 @@ export function statisticsQueryFor( grouping: Grouping, zone: Zone, serverTimeZone: string | undefined, + range = false, ): StatisticsQuery { const sameCalendar = zone.timeZone === serverTimeZone && (grouping.unit !== 'week' || zone.firstDay === 1); const period: StatisticsPeriod = grouping.unit === 'hour' || !sameCalendar ? 'hour' : grouping.unit; - return { period, ...COLUMNS[grouping.aggregate] }; + const { types, value } = COLUMNS[grouping.aggregate]; + // A range chart also wants each row's lowest and highest. + const wanted: StatisticField[] = range ? [...new Set([...types, 'min', 'max'])] : types; + return { period, types: wanted, value }; } diff --git a/src/styles/column.ts b/src/styles/column.ts new file mode 100644 index 0000000..06fdb42 --- /dev/null +++ b/src/styles/column.ts @@ -0,0 +1,564 @@ +import { css, html, nothing, svg } from 'lit'; +import type { TemplateResult } from 'lit'; +import { baseColor, bandFor } from '../bands'; +import { formatDateTime, formatTime, timeLabel, timeZoneOf, validateAxisOptions } from '../chart/axes'; +import type { TimeUnit } from '../chart/axes'; +import { + COLUMN_AGGREGATES, + COLUMN_GROUPS, + COLUMN_PERIOD, + columnBox, + columnRaw, + columnTable, + labelEvery, + spread, + zeroBased, +} from '../chart/columns'; +import type { ColumnTable } from '../chart/columns'; +import { + VIEW_H, + VIEW_W, + disconnectHistory, + frameMessage, + frameStyles, + historyFrame, + periodNav, + seriesHeader, + validateHistoryOptions, +} from '../chart/frame'; +import type { ChartSeries, HistoryFrame } from '../chart/frame'; +import { chartArea, gridStyles, plotAxes, plotWidth, stopChartWidth } from '../chart/grid'; +import type { PlotAxes, PlotScales } from '../chart/grid'; +import { chartFrame, chartLayout, headerOver, layoutStyles, validateLayout } from '../chart/layout'; +import { STACK_MODES, stackExtent, stackValues, totals, validateStack } from '../chart/stack'; +import type { Layer, StackMode } from '../chart/stack'; +import { + hoverHandlers, + hoverTime, + sharedUnit, + stopHover, + tooltipEnabled, + tooltipLayer, + tooltipStyles, + totalRow, + validateTooltipOptions, +} from '../chart/tooltip'; +import type { TooltipOptions } from '../chart/tooltip'; +import { + AXES_FIELDS, + HISTORY_FIELDS, + LAYOUT_FIELDS, + axesSchema, + cachedSchema, + chartForm, + choice, + historySchema, + historyVariant, + layoutSchema, +} from '../editor/chart-editors'; +import type { FieldBinding } from '../editor/schemas'; +import { formatNumber, withUnit } from '../format'; +import type { GroupUnit } from '../history/group'; +import type { Point } from '../history/types'; +import { localize, registerStrings } from '../localize'; +import type { CardConfig, HomeAssistant } from '../types'; +import type { ChartContext, ChartEditorContext, ChartStyleModule } from './index'; + +/** Above this many columns, none get value labels: they would overlap. */ +const MAX_LABELS = 60; +/** A column narrower than this (px) has no room for its value label. */ +const LABEL_PX = 24; +/** Room each group label needs under the chart, in px: clock times are the widest. */ +const GROUP_LABEL_PX: Record = { hour: 66, day: 52, week: 52, month: 60 }; +/** Corner radius of a column's outer end, in px, before narrow columns scale it down. */ +const RADIUS_PX = 4; + +registerStrings('en', { + editor_style_column: 'Column', + editor_group_by_auto: 'Automatic', + editor_aggregate_auto: 'Automatic (change for meters, else average)', + editor_range: 'Lowest to highest in each column', + editor_rounded: 'Rounded tops', + editor_column_labels: 'Show values on the columns', + editor_column_color: 'Colour', +}); + +const isColumnGroup = (v: unknown) => COLUMN_GROUPS.includes(v as (typeof COLUMN_GROUPS)[number]); + +/** Check the column chart's options, with its own grouping choices taken out first. */ +function validate(raw: CardConfig): void { + if (raw.group_by !== undefined && !isColumnGroup(raw.group_by)) { + throw new Error(`"group_by" must be one of: ${COLUMN_GROUPS.join(', ')}`); + } + if (raw.aggregate !== undefined && !COLUMN_AGGREGATES.includes(raw.aggregate as (typeof COLUMN_AGGREGATES)[number])) { + throw new Error(`"aggregate" must be one of: ${COLUMN_AGGREGATES.join(', ')}`); + } + const shared: Record = { ...raw }; + if (raw.group_by === 'auto' || raw.group_by === 'none') delete shared.group_by; + if (raw.aggregate === 'auto') delete shared.aggregate; + validateHistoryOptions(shared as CardConfig); + validateAxisOptions(raw); + validateTooltipOptions(raw); + validateLayout(raw); + validateStack(raw); + for (const k of ['range', 'rounded', 'labels']) { + if (raw[k] !== undefined && typeof raw[k] !== 'boolean') throw new Error(`"${k}" must be true or false`); + } + if (raw.color_by !== undefined && raw.color_by !== 'series' && raw.color_by !== 'bands') { + throw new Error('"color_by" must be one of: series, bands'); + } +} + +/** The time unit whose labels name a group: a week is named by its first day. */ +const LABEL_UNIT: Record = { hour: 'hour', day: 'day', week: 'day', month: 'month' }; + +/** A group's full name for the tooltip: "Tue 29 Oct, 14:00 – 15:00", "Tue 29 Oct", "26 Oct – 1 Nov", "October 2026". */ +export function groupHeading(start: number, end: number, unit: GroupUnit, hass: HomeAssistant | undefined): string { + if (unit === 'hour') return `${formatDateTime(start, hass)} – ${formatTime(end, hass)}`; + const options: Intl.DateTimeFormatOptions = + unit === 'day' + ? { weekday: 'short', day: 'numeric', month: 'short' } + : unit === 'week' + ? { day: 'numeric', month: 'short' } + : { month: 'long', year: 'numeric' }; + let format: Intl.DateTimeFormat; + try { + format = new Intl.DateTimeFormat(hass?.locale?.language ?? 'en', { ...options, timeZone: timeZoneOf(hass) }); + } catch { + format = new Intl.DateTimeFormat('en', options); + } + return unit === 'week' ? format.formatRange(start, end - 1) : format.format(start); +} + +const pct = (n: number, of: number) => `${Math.round((n / of) * 10000) / 100}%`; +const clampY = (y: number) => Math.min(VIEW_H, Math.max(0, y)); + +interface Drawn { + columns: TemplateResult[]; + labels: TemplateResult[]; + targets: TemplateResult[]; +} + +/** A column from `lo` to `hi` (values), `left`/`width` in plot units, with its outer end(s) rounded. */ +function column( + scales: PlotScales, + left: number, + width: number, + lo: number, + hi: number, + color: string, + cap: 'top' | 'bottom' | 'both' | '', + series: number, +) { + const top = clampY(scales.y(hi)); + const bottom = clampY(scales.y(lo)); + return html`
`; +} + +function valueLabel(ctx: ChartContext, x: number, y: number, v: number, decimals: number, below: boolean) { + return html`${formatNumber(v, decimals, ctx.hass)}`; +} + +function targetMark(scales: PlotScales, left: number, width: number, target: number) { + const y = scales.y(target); + if (y < 0 || y > VIEW_H) return html``; + return html`
`; +} + +/** Everything drawn in the plot: columns, their labels and target marks. */ +function drawColumns( + ctx: ChartContext, + frame: HistoryFrame, + table: ColumnTable, + scales: PlotScales, + mode: StackMode, + layers: Layer[][] | undefined, +): Drawn { + const raw = ctx.raw; + const series = frame.series; + const n = series.length; + const range = raw.range === true; + const byBands = raw.color_by === 'bands'; + const px = plotWidth(ctx) / VIEW_W; + const showLabels = raw.labels === true && mode !== 'percent' && table.times.length * (layers ? 1 : n) <= MAX_LABELS; + const showTargets = ctx.config.show.target && mode !== 'percent'; + const baseline = Math.min(Math.max(0, scales.domain[0]), scales.domain[1]); + const colorOf = (s: ChartSeries, v: number) => (byBands ? baseColor(bandFor(v, s.entity.bands).color) : s.color); + const out: Drawn = { columns: [], labels: [], targets: [] }; + const sums = layers ? totals(table.values) : []; + table.times.forEach((t, i) => { + const x0 = scales.x(t); + const x1 = scales.x(table.ends[i]); + if (layers) { + const [left, width] = columnBox(x0, x1, 0, 1); + // The outermost slice each way gets the rounded end. + let up = -1; + let down = -1; + layers.forEach((l, k) => { + const layer = l[i]; + if (layer && layer[1] > layer[0]) up = k; + if (layer && layer[1] < layer[0]) down = k; + }); + layers.forEach((l, k) => { + const layer = l[i]; + if (!layer || layer[0] === layer[1]) return; + const v = table.values[k][i] as number; + const cap = k === up ? 'top' : k === down ? 'bottom' : ''; + out.columns.push( + column(scales, left, width, Math.min(...layer), Math.max(...layer), colorOf(series[k], v), cap, k), + ); + }); + const sum = sums[i]; + if (showLabels && sum !== null && width * px >= LABEL_PX) { + const end = + sum >= 0 + ? Math.max(0, ...layers.map((l) => l[i]?.[1] ?? 0)) + : Math.min(0, ...layers.map((l) => l[i]?.[1] ?? 0)); + const decimals = Math.max(...series.map((s) => s.entity.decimals)); + out.labels.push(valueLabel(ctx, left + width / 2, scales.y(end), sum, decimals, sum < 0)); + } + const target = series[0].entity.target; + if (showTargets && target !== null) out.targets.push(targetMark(scales, left, width, target)); + return; + } + series.forEach((s, k) => { + const v = table.values[k][i]; + if (v === null) return; + const [left, width] = columnBox(x0, x1, k, n); + if (range) { + const lo = table.lows[k][i] ?? v; + const hi = table.highs[k][i] ?? v; + out.columns.push(column(scales, left, width, lo, hi, colorOf(s, v), 'both', k)); + out.columns.push( + html`
`, + ); + } else { + out.columns.push( + column( + scales, + left, + width, + Math.min(baseline, v), + Math.max(baseline, v), + colorOf(s, v), + v >= baseline ? 'top' : 'bottom', + k, + ), + ); + if (showLabels && width * px >= LABEL_PX) { + out.labels.push(valueLabel(ctx, left + width / 2, scales.y(v), v, s.entity.decimals, v < baseline)); + } + } + if (showTargets && s.entity.target !== null) out.targets.push(targetMark(scales, left, width, s.entity.target)); + }); + }); + return out; +} + +function render(ctx0: ChartContext): TemplateResult { + // The column chart's defaults (7 days, grouped to fit) filled in, for the shared frame to read. + const ctx = { ...ctx0, raw: columnRaw(ctx0.raw, ctx0.items) }; + const raw = ctx.raw; + const range = raw.range === true; + const frame = historyFrame(ctx, Date.now(), { range }); + const nav = periodNav(frame, ctx); + const names = seriesHeader(frame, ctx); + const header = nav === nothing && names === nothing ? nothing : html`${nav}${names}`; + const message = frameMessage(frame, ctx); + const layout = chartLayout(raw); + if (message) return chartFrame(layout.header === 'over' ? { ...layout, header: 'above' } : layout, header, message); + const mode: StackMode = range ? 'none' : ((raw.stack as StackMode | undefined) ?? 'none'); + const group = frame.group; + // Grouped, every slot is a whole group: today's column is as wide as yesterday's, and the time + // axis runs on to the end of the last group. + const table = columnTable( + frame.series.map((s) => s.points), + group ? Infinity : frame.range.end, + ); + const xRange = + group && table.ends.length ? { ...frame.range, end: Math.max(frame.range.end, ...table.ends) } : frame.range; + const layers = mode === 'none' ? undefined : stackValues(table.values, mode); + const targets = frame.series.map((s) => s.entity.target).filter((t): t is number => t !== null); + let data: [number, number] | undefined; + if (layers) data = stackExtent(layers); + else if (range) + data = spread([...table.lows.flat(), ...table.highs.flat(), ...table.values.flat(), ...targets], false); + else data = spread([...table.values.flat(), ...(ctx.config.show.target ? targets : [])]); + let fixed = raw; + if (mode === 'percent') fixed = { y_min: data![0] < 0 ? -100 : 0, y_max: data![1] > 0 ? 100 : 0, ...raw }; + else if (!range && data) fixed = zeroBased(data, raw); + let axes: PlotAxes = plotAxes({ ...ctx, raw: fixed }, xRange, data); + const { scales } = axes; + const centres = table.times.map((t, i) => (t + table.ends[i]) / 2); + const slotOf = new Map(centres.map((c, i) => [c, i])); + if (group && centres.length) { + // One label under each set of columns, every second or third one when they won't all fit. + const every = labelEvery(centres.length, plotWidth(ctx) / GROUP_LABEL_PX[group.unit]); + const unit = LABEL_UNIT[group.unit]; + // A week's worth of days goes by its day names. + const span = group.unit === 'day' && centres.length <= 8 ? 7 * 86_400_000 : frame.range.end - frame.range.start; + axes = { + ...axes, + unit, + times: centres.filter((_, i) => i % every === 0), + label: (c) => timeLabel(table.times[slotOf.get(c)!], unit, span, ctx.hass), + }; + } + const drawn = drawColumns(ctx, frame, table, scales, mode, layers); + // The tooltip reads each series at the middle of each slot. + const shown: ChartSeries[] = frame.series.map((s, k) => ({ + ...s, + points: centres.map((t, i): Point => ({ t, v: table.values[k][i], min: table.lows[k][i], max: table.highs[k][i] })), + })); + const tip: TooltipOptions = { + dotY: () => null, + heading: (c) => { + const i = slotOf.get(c); + if (i === undefined) return formatDateTime(c, ctx.hass); + return group + ? groupHeading(table.times[i], table.ends[i], group.unit, ctx.hass) + : formatDateTime(table.times[i], ctx.hass); + }, + }; + const fmt = (v: number, s: ChartSeries) => formatNumber(v, s.entity.decimals, ctx.hass); + if (range) { + tip.text = (s, p) => { + if (!p || p.v === null) return '—'; + const lo = p.min ?? p.v; + const hi = p.max ?? p.v; + return withUnit(`${fmt(lo, s)} – ${fmt(hi, s)}`, s.entity.unit); + }; + } + if (layers) { + const sums = totals(table.values); + const unit = sharedUnit(shown); + const decimals = Math.max(...shown.map((s) => s.entity.decimals)); + tip.footer = (rows) => totalRow(ctx, sums[slotOf.get(rows[0]?.p?.t ?? NaN) ?? -1] ?? null, unit, decimals); + if (mode === 'percent') { + tip.text = (s, p) => { + const layer = p ? layers[s.index][slotOf.get(p.t) ?? -1] : null; + if (!p || p.v === null || !layer) return '—'; + return `${withUnit(fmt(p.v, s), s.entity.unit)} · ${Math.round(Math.abs(layer[1] - layer[0]))} %`; + }; + } + } + const tooltip = tooltipEnabled(raw); + const hovered = tooltip ? hoverTime(ctx.host) : undefined; + const at = hovered === undefined ? undefined : slotOf.get(hovered); + const highlight = + at === undefined + ? nothing + : html`
`; + const label = localize(ctx.hass, 'chart_aria', { + style: localize(ctx.hass, 'editor_style_column'), + names: frame.series.map((s) => s.entity.name).join(', '), + }); + const radius = raw.rounded === false ? 0 : RADIUS_PX; + return chartFrame( + layout, + header, + chartArea({ + axes, + ctx, + content: svg``, + label, + overlay: html`
${highlight}${drawn.columns}${drawn.targets}
+
${drawn.labels}
+ ${layout.header === 'over' ? headerOver(header) : nothing} + ${tooltip ? tooltipLayer(ctx, shown, scales, hovered, plotWidth(ctx), tip) : nothing}`, + hover: tooltip + ? hoverHandlers( + ctx, + xRange, + shown.map((s) => s.points), + ) + : undefined, + }), + ); +} + +/** The shared history fields with the column chart's defaults: 7 days, grouping chosen for you. */ +const COLUMN_HISTORY_FIELDS: FieldBinding[] = HISTORY_FIELDS.map((f) => { + if (f.name === 'period_last') return { ...f, default: COLUMN_PERIOD.last }; + if (f.name === 'period_unit') return { ...f, default: COLUMN_PERIOD.unit }; + if (f.name === 'group_by' || f.name === 'aggregate') return { ...f, default: 'auto' }; + return f; +}); + +const COLUMN_FIELDS: FieldBinding[] = [ + ...COLUMN_HISTORY_FIELDS, + { name: 'stack', path: ['stack'], default: 'none' }, + { name: 'color_by', path: ['color_by'], default: 'series' }, + { name: 'range', path: ['range'], default: false }, + { name: 'column_labels', path: ['labels'], default: false }, + { name: 'rounded', path: ['rounded'], default: true }, + ...AXES_FIELDS, + ...LAYOUT_FIELDS, +]; + +/** + * A rolling period edited here keeps both its length and unit in the config: the column chart's + * default (7 days) differs from other charts', so a lone `last: 24` would read as 24 hours. + */ +export function fullPeriod(config: CardConfig): CardConfig { + const period = config.period as Record | undefined; + if (!period || typeof period !== 'object' || period.calendar !== undefined) return config; + if (period.last !== undefined && period.unit !== undefined) return config; + return { ...config, period: { last: COLUMN_PERIOD.last, unit: COLUMN_PERIOD.unit, ...period } }; +} + +export function columnEditor(ctx: ChartEditorContext): TemplateResult { + const ungrouped = ctx.config.group_by === 'none'; + // The shared period fields without their grouping row: the column chart has its own choices. + const period = { ...ctx.config, group_by: undefined }; + const schema = cachedSchema(`column|${historyVariant(period)}|${ungrouped}`, ctx.hass, () => [ + ...historySchema(ctx.hass, period).slice(0, -1), + { + type: 'grid', + name: '', + schema: [ + { name: 'group_by', selector: choice(ctx.hass, 'group_by', COLUMN_GROUPS) }, + ...(ungrouped ? [] : [{ name: 'aggregate', selector: choice(ctx.hass, 'aggregate', COLUMN_AGGREGATES) }]), + ], + }, + { + type: 'grid', + name: '', + schema: [ + { name: 'stack', selector: choice(ctx.hass, 'stack', STACK_MODES) }, + { name: 'color_by', selector: choice(ctx.hass, 'color_by', ['series', 'bands']) }, + ], + }, + { + type: 'grid', + name: '', + schema: [ + { name: 'range', selector: { boolean: {} } }, + { name: 'column_labels', selector: { boolean: {} } }, + { name: 'rounded', selector: { boolean: {} } }, + ], + }, + ...axesSchema(ctx.hass), + ...layoutSchema(ctx.hass), + ]); + return chartForm({ ...ctx, commit: (c) => ctx.commit(fullPeriod(c)) }, 'chart', schema, COLUMN_FIELDS); +} + +const ENTITY_FIELDS: FieldBinding[] = [{ name: 'column_color', path: ['color'] }]; + +export const columnStyles = css` + .columns { + position: absolute; + inset: 0; + pointer-events: none; + } + .col { + position: absolute; + box-sizing: border-box; + transform-origin: 50% 100%; + animation: cd-col-grow var(--cd-duration) var(--cd-easing); + } + .col.down { + transform-origin: 50% 0; + } + .col.cap-top { + border-radius: var(--r) var(--r) 0 0; + } + .col.cap-bottom { + border-radius: 0 0 var(--r) var(--r); + } + .col.cap-both { + border-radius: var(--r); + opacity: 0.75; + } + .col-mark { + position: absolute; + height: 0; + border-top: 2px solid var(--card-background-color, #fff); + transform: translateY(-1px); + } + .target-mark { + position: absolute; + height: 0; + border-top: 2px solid var(--primary-text-color); + transform: translateY(-1px); + border-radius: 1px; + } + .slot-hover { + position: absolute; + top: 0; + bottom: 0; + background: color-mix(in srgb, var(--primary-text-color) 7%, transparent); + } + .point-label.col-label.below { + transform: translate(-50%, 4px); + } + :host([static]) .col { + animation: none; + } + @keyframes cd-col-grow { + from { + transform: scaleY(0); + } + } + /* Labels over the plot stay readable above the columns. */ + .axes-inside .y-axis, + .axes-inside .x-axis { + z-index: 1; + } +`; + +export const columnChart: ChartStyleModule = { + layout: 'chart', + group: 'history', + height: 240, + styles: css` + ${frameStyles} + ${gridStyles} + ${tooltipStyles} + ${layoutStyles} + ${columnStyles} + `, + thumbnail: () => svg` + + + + + + `, + validate, + editor: columnEditor, + entityFields: (hass) => ({ + schema: cachedSchema('column-entity', hass, () => [{ name: 'column_color', selector: { text: {} } }]), + fields: ENTITY_FIELDS, + }), + disconnect(host) { + disconnectHistory(host); + stopChartWidth(host); + stopHover(host); + }, + render, +}; diff --git a/src/styles/index.ts b/src/styles/index.ts index ea77cab..f74dbda 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -4,6 +4,7 @@ import type { ResolvedEntity } from '../resolve'; import type { CardConfig, HomeAssistant, NormalizedConfig, ShowOptions, StyleName } from '../types'; import { area } from './area'; import { bar } from './bar'; +import { columnChart } from './column'; import { line } from './line'; import { needle } from './needle'; import { arc, ring } from './radial'; @@ -107,5 +108,6 @@ export const STYLES: Record = { needle, arc, line, + column: columnChart, area, }; diff --git a/src/types.ts b/src/types.ts index 7c12cbf..3450938 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,6 +1,17 @@ import type { Rule } from './fill'; -export type StyleName = 'bar' | 'thin' | 'segmented' | 'tank' | 'ring' | 'needle' | 'arc' | 'line' | 'area'; -export const STYLE_NAMES: StyleName[] = ['bar', 'thin', 'segmented', 'tank', 'ring', 'needle', 'arc', 'line', 'area']; +export type StyleName = 'bar' | 'thin' | 'segmented' | 'tank' | 'ring' | 'needle' | 'arc' | 'line' | 'column' | 'area'; +export const STYLE_NAMES: StyleName[] = [ + 'bar', + 'thin', + 'segmented', + 'tank', + 'ring', + 'needle', + 'arc', + 'line', + 'column', + 'area', +]; export type SortMode = 'none' | 'ascending' | 'descending'; /** A number, or a string naming an entity whose state supplies the number. */ export type Limit = number | string; diff --git a/test/column.test.ts b/test/column.test.ts new file mode 100644 index 0000000..3d42b06 --- /dev/null +++ b/test/column.test.ts @@ -0,0 +1,303 @@ +import { afterEach, describe, expect, it } from 'vitest'; +import '../src/chartdeck-card'; +import { + autoGroupUnit, + columnBox, + columnRaw, + columnTable, + isMeter, + labelEvery, + spread, + zeroBased, +} from '../src/chart/columns'; +import { groupHistory, groupStatistics, statisticsQueryFor } from '../src/history/group'; +import { parsePeriod } from '../src/history/period'; +import type { ResolvedEntity } from '../src/resolve'; +import { fullPeriod, groupHeading } from '../src/styles/column'; +import type { CardConfig } from '../src/types'; +import { H, ago, chartHass, mountCard, mountEditor, pointAt, q, qa, tooltipRows } from './helpers/chart'; +import type { Card } from './helpers/chart'; + +const now = Date.now(); +const sec = (ms: number) => ago(now, ms); +const D = 24 * H; + +const states = { + 'sensor.energy': ['1000', { friendly_name: 'Energy', unit_of_measurement: 'kWh', state_class: 'total_increasing' }], + 'sensor.solar': ['40', { friendly_name: 'Solar', unit_of_measurement: 'kWh', state_class: 'total_increasing' }], + 'sensor.temp': ['20', { friendly_name: 'Temp', unit_of_measurement: '°C', state_class: 'measurement' }], + 'sensor.grid': ['-200', { friendly_name: 'Grid', unit_of_measurement: 'W' }], +} as const; + +/** A meter that goes up 10 a day for the last 10 days. */ +const meter = (perDay: number) => + Array.from({ length: 11 }, (_, i) => ({ s: String(1000 + perDay * i), lu: sec((10 - i) * D + H) })); + +const history = { + 'sensor.energy': meter(10), + 'sensor.solar': meter(4), + 'sensor.temp': [ + { s: '15', lu: sec(30 * H) }, + { s: '25', lu: sec(20 * H) }, + { s: '18', lu: sec(5 * H) }, + ], + 'sensor.grid': [ + { s: '400', lu: sec(20 * H) }, + { s: '-600', lu: sec(10 * H) }, + { s: 'unavailable', lu: sec(5 * H) }, + ], +}; + +const mount = (config: Record, hass = chartHass(states, history)) => + mountCard({ style: 'column', entities: ['sensor.energy'], ...config } as Partial, hass); + +const entity = (attrs: Record, attribute?: string) => + ({ config: { entity: 'sensor.x', attribute }, stateObj: { attributes: attrs } }) as unknown as ResolvedEntity; + +afterEach(() => { + document.body.innerHTML = ''; +}); + +describe('column maths', () => { + it('picks a grouping for the span', () => { + expect(autoGroupUnit(parsePeriod({ last: 24, unit: 'hour' }))).toBe('hour'); + expect(autoGroupUnit(parsePeriod({ last: 7, unit: 'day' }))).toBe('day'); + expect(autoGroupUnit(parsePeriod({ last: 12, unit: 'week' }))).toBe('week'); + expect(autoGroupUnit(parsePeriod({ last: 12, unit: 'month' }))).toBe('month'); + expect(autoGroupUnit(parsePeriod({ calendar: 'day' }))).toBe('hour'); + expect(autoGroupUnit(parsePeriod({ calendar: 'year' }))).toBe('month'); + }); + + it('fills in 7 days, automatic grouping, and the change for meters', () => { + const meters = [entity({ state_class: 'total_increasing' }), entity({ state_class: 'total' })]; + const raw = { type: 'x' } as CardConfig; + expect(columnRaw(raw, meters)).toMatchObject({ + period: { last: 7, unit: 'day' }, + group_by: 'day', + aggregate: 'change', + }); + expect(columnRaw({ ...raw, range: true }, meters).aggregate).toBe('mean'); + expect(columnRaw(raw, [...meters, entity({ state_class: 'measurement' })]).aggregate).toBe('mean'); + expect(columnRaw({ ...raw, group_by: 'none', aggregate: 'max' }, meters)).not.toHaveProperty('group_by'); + expect(columnRaw({ ...raw, group_by: 'week', period: { calendar: 'day' } }, meters).group_by).toBe('week'); + expect(isMeter(entity({ state_class: 'total_increasing' }, 'reading'))).toBe(false); + }); + + it('lines readings up into slots, holding values and dropping the empty last one', () => { + const t = columnTable( + [ + [ + { t: 0, v: 1 }, + { t: 20, v: 2 }, + { t: 30, v: 2 }, + ], + [{ t: 10, v: 5, min: 4, max: 6 }], + ], + 30, + ); + expect(t.times).toEqual([0, 10, 20]); + expect(t.ends).toEqual([10, 20, 30]); + expect(t.values).toEqual([ + [1, 1, 2], + [null, 5, 5], + ]); + expect(t.lows[1]).toEqual([null, 4, null]); + const grouped = columnTable([[{ t: 0, end: 24, v: 3 }]], Infinity); + expect(grouped.ends).toEqual([24]); + }); + + it('places columns side by side in a slot, and fits the axis to zero', () => { + expect(columnBox(0, 100, 0, 1)).toEqual([10, 80]); + const [l0, w0] = columnBox(0, 100, 0, 2); + const [l1] = columnBox(0, 100, 1, 2); + expect(l1 - l0).toBeCloseTo(40); + expect(w0).toBeCloseTo(40 * 0.88); + const raw = { type: 'x' } as CardConfig; + expect(zeroBased([5, 10], raw).y_min).toBe(0); + expect(zeroBased([-5, -1], raw).y_max).toBe(0); + expect(zeroBased([5, 10], { ...raw, y_min: 3 }).y_min).toBe(3); + expect(spread([3, null, 7])).toEqual([0, 7]); + expect(spread([3, 7], false)).toEqual([3, 7]); + expect(spread([null], false)).toBeUndefined(); + expect(labelEvery(30, 8)).toBe(4); + expect(labelEvery(3, 0)).toBe(3); + }); + + it('keeps each group’s lowest and highest when asked', () => { + const pts = [ + { t: 0, v: 5 }, + { t: 10, v: 9 }, + { t: 20, v: 1 }, + ]; + const [g] = groupHistory(pts, [0, 30], 'mean', 30, true); + expect([g.min, g.max]).toEqual([1, 9]); + expect(groupHistory(pts, [0, 30], 'mean', 30)[0].min).toBeUndefined(); + const rows = [ + { t: 0, v: 5, min: 2, max: 8 }, + { t: 10, v: 6, min: null, max: null }, + ]; + const [s] = groupStatistics(rows, [0, 20], 'mean', Infinity, true); + expect([s.min, s.max]).toEqual([2, 8]); + const zone = { timeZone: 'UTC', firstDay: 1 }; + expect(statisticsQueryFor({ unit: 'day', aggregate: 'mean' }, zone, 'UTC', true).types).toEqual([ + 'mean', + 'min', + 'max', + ]); + expect(statisticsQueryFor({ unit: 'day', aggregate: 'mean' }, zone, 'UTC').types).toEqual(['mean']); + }); + + it('names a group in the tooltip', () => { + const start = Date.UTC(2026, 9, 26); + expect(groupHeading(start, start + D, 'day', undefined)).toMatch(/26/); + expect(groupHeading(start, start + 7 * D, 'week', undefined)).toMatch(/26.*1|Oct.*Nov/); + expect(groupHeading(start, start + 31 * D, 'month', undefined)).toMatch(/2026/); + expect(groupHeading(start, start + H, 'hour', undefined)).toMatch(/–/); + }); + + it('keeps a rolling period whole when the editor writes it', () => { + expect(fullPeriod({ type: 'x', period: { last: 24 } })).toEqual({ type: 'x', period: { last: 24, unit: 'day' } }); + expect(fullPeriod({ type: 'x', period: { calendar: 'week' } })).toEqual({ + type: 'x', + period: { calendar: 'week' }, + }); + expect(fullPeriod({ type: 'x' })).toEqual({ type: 'x' }); + }); +}); + +describe('column chart', () => { + it('shows a meter as daily totals over the last 7 days with no setup', async () => { + const card = await mount({ labels: true }); + const cols = qa(card, '.col'); + expect(cols.length).toBeGreaterThanOrEqual(7); + expect(cols.length).toBeLessThanOrEqual(8); + expect(cols.every((c) => c.classList.contains('cap-top'))).toBe(true); + expect(qa(card, '.col-label').some((l) => l.textContent === '10.0')).toBe(true); + // A label under every day, or every other one on a narrow card. + expect(qa(card, '.x-axis .axis-label').length).toBeGreaterThanOrEqual(4); + expect(q(card, 'svg.plot')!.getAttribute('aria-label')).toBe('Column chart of Energy'); + const area = q(card, '.plot-area')!; + pointAt(area, 'pointermove', 0.5); + await card.updateComplete; + expect(tooltipRows(card)[0]).toMatch(/^Energy 10\.0 kWh$/); + expect(q(card, '.slot-hover')).not.toBeNull(); + expect(qa(card, '.hover-dot')).toHaveLength(0); + }); + + it('draws series side by side, coloured by band, with a target on each column', async () => { + const card = await mount({ + entities: [{ entity: 'sensor.energy', target: 8 }, 'sensor.solar'], + color_by: 'bands', + severity: [ + { from: 0, color: 'green' }, + { from: 5, color: 'red' }, + ], + }); + const a = qa(card, '.col[data-series="0"]'); + const b = qa(card, '.col[data-series="1"]'); + expect(a.length).toBe(b.length); + expect(a[1].getAttribute('style')).toContain('--error-color'); + expect(b[1].getAttribute('style')).toContain('--success-color'); + expect(qa(card, '.target-mark').length).toBe(a.length); + }); + + it('stacks columns with a total, and to 100 %', async () => { + const card = await mount({ stack: 'normal', labels: true, entities: ['sensor.energy', 'sensor.solar'] }); + expect(qa(card, '.col.cap-top').every((c) => c.getAttribute('data-series') === '1')).toBe(true); + expect(qa(card, '.col-label').some((l) => l.textContent === '14.0')).toBe(true); + pointAt(q(card, '.plot-area')!, 'pointermove', 0.5); + await card.updateComplete; + expect(tooltipRows(card)).toEqual(['Energy 10.0 kWh', 'Solar 4.0 kWh', 'Total 14.0 kWh']); + const pct = await mount({ stack: 'percent', entities: ['sensor.energy', 'sensor.solar'] }); + expect(qa(pct, '.y-axis .axis-label').at(-1)!.textContent).toBe('100'); + pointAt(q(pct, '.plot-area')!, 'pointermove', 0.5); + await pct.updateComplete; + expect(tooltipRows(pct)[0]).toBe('Energy 10.0 kWh · 71 %'); + }); + + it('hangs negative columns below zero, and leaves a gap while unavailable', async () => { + const card = await mount({ entities: ['sensor.grid'], period: { last: 24, unit: 'hour' }, labels: true }); + expect(qa(card, '.col.cap-bottom').length).toBeGreaterThan(0); + expect(qa(card, '.col.down').length).toBeGreaterThan(0); + expect(qa(card, '.col').length).toBeLessThan(24); + }); + + it('draws one column per reading when not grouped', async () => { + const card = await mount({ entities: ['sensor.temp'], group_by: 'none', period: { last: 2, unit: 'day' } }); + expect(qa(card, '.col')).toHaveLength(3); + }); + + it('draws range columns from each group’s lowest to highest, from statistics', async () => { + const stats = { + 'sensor.temp': [ + { start: now - 2 * D, mean: 18, min: 12, max: 24 }, + { start: now - D, mean: 20, min: 15, max: 26 }, + ], + }; + const hass = chartHass(states, history, stats); + const card = await mount({ entities: ['sensor.temp'], range: true, source: 'statistics', group_by: 'day' }, hass); + expect(qa(card, '.col.cap-both').length).toBeGreaterThan(0); + expect(qa(card, '.col-mark').length).toBe(qa(card, '.col.cap-both').length); + const call = (hass.callWS as unknown as { mock: { calls: [{ types: string[] }][] } }).mock.calls[0][0]; + expect(call.types).toEqual(expect.arrayContaining(['mean', 'min', 'max'])); + pointAt(q(card, '.plot-area')!, 'pointermove', 0.8); + await card.updateComplete; + expect(tooltipRows(card)[0]).toMatch(/Temp \d+\.\d – \d+\.\d °C/); + }); + + it('checks its options', () => { + const card = document.createElement('chartdeck-card') as Card; + const set = (extra: Record) => () => + card.setConfig({ type: 'x', style: 'column', entities: ['sensor.energy'], ...extra } as CardConfig); + expect(set({ group_by: 'year' })).toThrow(/group_by/); + expect(set({ aggregate: 'median' })).toThrow(/aggregate/); + expect(set({ range: 'yes' })).toThrow(/range/); + expect(set({ color_by: 'mood' })).toThrow(/color_by/); + expect(set({ stack: 'up' })).toThrow(/stack/); + expect(set({ group_by: 'auto', aggregate: 'auto', rounded: false })).not.toThrow(); + expect(set({ group_by: 'none' })).not.toThrow(); + }); +}); + +describe('column chart editor', () => { + it('defaults to 7 days with automatic grouping and writes its own options', async () => { + const raw = { type: 'custom:chartdeck-card', style: 'column', entities: ['sensor.energy'] } as CardConfig; + const { form, change, events, entityFields } = await mountEditor(raw, chartHass(states, {})); + expect(form().data).toMatchObject({ + period_last: 7, + period_unit: 'day', + group_by: 'auto', + aggregate: 'auto', + stack: 'none', + range: false, + column_labels: false, + rounded: true, + color_by: 'series', + }); + change({ period_last: 24 }); + expect(events.at(-1)).toEqual({ ...raw, period: { last: 24, unit: 'day' } }); + change({ stack: 'percent', column_labels: true, rounded: false, range: true, group_by: 'none' }); + expect(events.at(-1)).toEqual({ + ...raw, + stack: 'percent', + labels: true, + rounded: false, + range: true, + group_by: 'none', + }); + const schema = JSON.stringify(form().schema); + expect(schema).toContain('"aggregate"'); + expect(entityFields().fields.map((f) => f.name)).toEqual(['column_color']); + }); + + it('hides the combine choice when each reading is its own column', async () => { + const raw = { + type: 'custom:chartdeck-card', + style: 'column', + group_by: 'none', + entities: ['sensor.energy'], + } as CardConfig; + const { form } = await mountEditor(raw, chartHass(states, {})); + expect(JSON.stringify(form().schema)).not.toContain('"aggregate"'); + }); +});