From 4622c228854ef46439a1147975b1afdb8d039299 Mon Sep 17 00:00:00 2001 From: Julien Deveaux Date: Thu, 12 Dec 2024 14:48:29 +0100 Subject: [PATCH 1/9] feat: add startup loader --- src/main.js | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/src/main.js b/src/main.js index 46496c4a..7d617caa 100644 --- a/src/main.js +++ b/src/main.js @@ -322,14 +322,32 @@ class MiniGraphCard extends LitElement { `; } + renderLoader() { + const { height } = this.config; + return svg` +
+ + + + + + +
+ `; + } + renderGraph() { + const ready = this.config.show.graph + && this.entity[0] + && this.Graph[0]._history !== undefined; + return this.config.show.graph ? html`
${this.renderLabels()} ${this.renderLabelsSecondary()}
- ${this.renderSvg()} + ${ready ? this.renderSvg() : this.renderLoader()}
${this.renderLegend()} From 3e398e47a9e1349e07737aa6586ac84131d58783 Mon Sep 17 00:00:00 2001 From: Julien Deveaux Date: Thu, 12 Dec 2024 15:12:01 +0100 Subject: [PATCH 2/9] style: better looking loader --- src/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main.js b/src/main.js index 7d617caa..36b52cc6 100644 --- a/src/main.js +++ b/src/main.js @@ -327,7 +327,7 @@ class MiniGraphCard extends LitElement { return svg`
- + From ecb85d5ba214ed1b969996eb7fa7f108c25c4b66 Mon Sep 17 00:00:00 2001 From: Julien Deveaux Date: Sat, 14 Dec 2024 00:50:01 +0100 Subject: [PATCH 3/9] style: variable css color for loader --- src/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main.js b/src/main.js index 36b52cc6..8f262dfa 100644 --- a/src/main.js +++ b/src/main.js @@ -327,7 +327,7 @@ class MiniGraphCard extends LitElement { return svg`
- + From d873e0d3ab7881bdf994c0f3d5343fdc5a902959 Mon Sep 17 00:00:00 2001 From: Julien Deveaux Date: Tue, 17 Dec 2024 00:46:47 +0100 Subject: [PATCH 4/9] refactor: remove useless condition --- src/main.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/main.js b/src/main.js index 8f262dfa..cf4d2eb2 100644 --- a/src/main.js +++ b/src/main.js @@ -337,9 +337,7 @@ class MiniGraphCard extends LitElement { } renderGraph() { - const ready = this.config.show.graph - && this.entity[0] - && this.Graph[0]._history !== undefined; + const ready = this.entity[0] && this.Graph[0]._history !== undefined; return this.config.show.graph ? html`
From 9388f17bbae0325e615b5dfc4c43a482b9c9d677 Mon Sep 17 00:00:00 2001 From: Julien Deveaux Date: Wed, 18 Dec 2024 17:26:55 +0100 Subject: [PATCH 5/9] refactor: new loading animation --- src/main.js | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/src/main.js b/src/main.js index cf4d2eb2..602feb6f 100644 --- a/src/main.js +++ b/src/main.js @@ -324,18 +324,24 @@ class MiniGraphCard extends LitElement { renderLoader() { const { height } = this.config; + const numberOfBars = 20; return svg` -
+
- - - - + ${Array.from({ length: numberOfBars }, (_, i) => i).map(i => svg` + + + + `)}
`; } + getLoaderBarHeight(height, i) { + return (Math.abs(Math.sin(i / 2 + 1) * height / 1.5) % height) + 10; + } + renderGraph() { const ready = this.entity[0] && this.Graph[0]._history !== undefined; From d3097722cd92bdb25c82f229361ef2113a37f304 Mon Sep 17 00:00:00 2001 From: Julien Deveaux Date: Fri, 20 Dec 2024 23:25:11 +0100 Subject: [PATCH 6/9] feat: streamline loader with native ha loader --- src/main.js | 18 +++--------------- 1 file changed, 3 insertions(+), 15 deletions(-) diff --git a/src/main.js b/src/main.js index 602feb6f..6d423cb1 100644 --- a/src/main.js +++ b/src/main.js @@ -323,25 +323,13 @@ class MiniGraphCard extends LitElement { } renderLoader() { - const { height } = this.config; - const numberOfBars = 20; - return svg` -
- - ${Array.from({ length: numberOfBars }, (_, i) => i).map(i => svg` - - - - `)} - + return html` +
+
`; } - getLoaderBarHeight(height, i) { - return (Math.abs(Math.sin(i / 2 + 1) * height / 1.5) % height) + 10; - } - renderGraph() { const ready = this.entity[0] && this.Graph[0]._history !== undefined; From ed892fcda1e4ff23b27f54d328672335bf2d0d49 Mon Sep 17 00:00:00 2001 From: Julien Deveaux Date: Sat, 21 Dec 2024 00:13:41 +0100 Subject: [PATCH 7/9] feat: do not render labels when loading --- src/main.js | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/src/main.js b/src/main.js index 6d423cb1..72939e26 100644 --- a/src/main.js +++ b/src/main.js @@ -325,7 +325,7 @@ class MiniGraphCard extends LitElement { renderLoader() { return html`
- +
`; } @@ -335,14 +335,16 @@ class MiniGraphCard extends LitElement { return this.config.show.graph ? html`
-
- ${this.renderLabels()} - ${this.renderLabelsSecondary()} -
- ${ready ? this.renderSvg() : this.renderLoader()} -
-
- ${this.renderLegend()} + ${ready ? html` +
+ ${this.renderLabels()} + ${this.renderLabelsSecondary()} +
+ ${ready ? this.renderSvg() : this.renderLoader()} +
+
+ ${this.renderLegend()} + ` : this.renderLoader()}
` : ''; } From 096c469beecded3770bee372db3ff4d7283ae872 Mon Sep 17 00:00:00 2001 From: Julien Deveaux Date: Sat, 21 Dec 2024 00:39:18 +0100 Subject: [PATCH 8/9] PR fixes --- src/main.js | 14 ++++---------- src/style.js | 3 +++ 2 files changed, 7 insertions(+), 10 deletions(-) diff --git a/src/main.js b/src/main.js index 72939e26..3fd21865 100644 --- a/src/main.js +++ b/src/main.js @@ -322,14 +322,6 @@ class MiniGraphCard extends LitElement { `; } - renderLoader() { - return html` -
- -
- `; - } - renderGraph() { const ready = this.entity[0] && this.Graph[0]._history !== undefined; @@ -340,11 +332,13 @@ class MiniGraphCard extends LitElement { ${this.renderLabels()} ${this.renderLabelsSecondary()}
- ${ready ? this.renderSvg() : this.renderLoader()} + this.renderSvg()
${this.renderLegend()} - ` : this.renderLoader()} + ` : html` + + `}
` : ''; } diff --git a/src/style.js b/src/style.js index 497c2aeb..01395872 100644 --- a/src/style.js +++ b/src/style.js @@ -67,6 +67,9 @@ const style = css` ha-card[hover] { cursor: pointer; } + ha-circular-progress { + margin: auto; + } .flex { display: flex; display: -webkit-flex; From 7ef3eff1f3d0f5d5d0c8212a886feed2fb8a5e9c Mon Sep 17 00:00:00 2001 From: Julien Deveaux Date: Sat, 21 Dec 2024 00:48:12 +0100 Subject: [PATCH 9/9] fix: dumb mistake --- src/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main.js b/src/main.js index 3fd21865..a53666a1 100644 --- a/src/main.js +++ b/src/main.js @@ -332,7 +332,7 @@ class MiniGraphCard extends LitElement { ${this.renderLabels()} ${this.renderLabelsSecondary()}
- this.renderSvg() + ${this.renderSvg()}
${this.renderLegend()}