Half and full gauge mix up

[barto64]

If you have several graphs across different views it looks like the first one you look at make the set-up of the full or half gauge across all the session for all the graphs you had. This way if the first one you look is a half all other full graphs you have in other views will appear only half losing half of it and viceversa, if the first one you look is full you will see all other half as if they were full with the lowest part empty.

Hope I had been able to explain it well.

Thanks

[Olen]

I think this is i more general problem when having multiple gauges.
Some values for the settings seems to be inhertied from the first instance of a gauge-card that is created.
I have a page with many gauges, some radials, some linears.
ALL the gauges seems to inherit at least the "width" and "height" value from the first one. So if the first gauge in my config is "gauge.width: 220", then all the other gauges get the same width, no matter what I set in the config.

The really strange issue is that this only affects the css part of the card code. I have looked at the source and can not understand why this is happening as they seem to be using the same variable in the javascript (${this._gaugeWidth}).

Consider the following:

      - type: 'custom:canvas-gauge-card'
        card_height: 225
        gauge:
          type: radial-gauge
          height: 220
          width: 220
(...)

      - type: 'custom:canvas-gauge-card'
        card_height: 223
        gauge:
          type: linear-gauge
          height: 200
          width: 100

For the first card, I get the following:

<style>
#cardroot {
  width: 220px;
  height: calc(225px + 0px);
}
#container {
  width: 220;
  height: 225px;
}

</style>
<div id="cardroot">
  <div id="container" width="220" height="225">
    <div id="innercontainer" width="220" height="225">
(...)

Which is correct.

But for the second gauge I get the following:

<style>
#cardroot {
  width: 220;
  height: calc(225px + 0px);
}
#container {
  width: 220;
  height: 225px;
}

</style>
<div id="cardroot">
  <div id="container" width="100" height="223">
    <div id="innercontainer" width="100" height="223">
(...)

So the width and height set in the div-tags are correctly set from the card config. But the wdth and height in css in the style-section is from the FIRST card that is configured (verfied by changing the config of the first card, and watching the width of all the gauges change.

[shtrom]

ALL the gauges seems to inherit at least the "width" and "height" value from the first one. So if the first gauge in my config is "gauge.width: 220", then all the other gauges get the same width, no matter what I set in the config.

I can confirm this.

Something I just noticed looking at the DOM may be a clue: all the divs series for each card have the same ids (container, innercontainer, ...), which I think should be unique in a DOM

and the generated CSS for #container then forces all the divs to the same size.

I think that

1. all those ids should be class
2. the generated CSS for those classes should not set any width or height, and
3. each element's style should set the dimensions

I just hacked my local canvas-gauge-card.js to do so (see diff), and I've had reasonable success (though not complete when dealing with responsivity, maybe due to #39).

See diff below. I think a cleaner version of this may be the solution.

--- canvas-gauge-card.js.orig	2023-04-07 17:19:30.617631898 +1000
+++ canvas-gauge-card.js	2023-04-07 18:02:56.965266265 +1000
@@ -232,37 +232,27 @@
           transition: all 0.3s ease-out !important;
           background-color: ${this._config.background_color?this._config.background_color:"transparent"} !important;
         }
-        #cardroot {
-          width: ${this._gaugeWidth}px;
-          height: calc(
-            ${this._gaugeHeight}px +
-              ${this._config.shadow_bottom?this._config.shadow_bottom:0}px
-          );
+        .cardroot {
           position: relative;
           margin: auto;
         }
-        #container {
-          width: ${this._gaugeWidth}px;
-          height: ${this._gaugeHeight}px;
+        .container {
           position: relative;
           top: 0px;
           overflow: hidden;
           text-align: center;
         }
-        #innercontainer {
+        .innercontainer {
           position: relative;
-          top: ${this._config.card_top?this._config.card_top:0};
-          left: ${this._config.card_left?this._config.card_left:0};
         }
         .shadow {
-          width: 100%;
-          height: ${this._shadowHeight};
+	  width: 100%;
           left: 0px;
           bottom: 0px;
           background: rgba(0, 0, 0, 0.5);
           position: absolute;
         }
-        #state {
+        .state {
           position: relative;
           float: left;
           top: 50%;
@@ -272,23 +262,29 @@
           transform: translate(-50%, -50%);
         }
       </style>
-      <div id="cardroot">
+      <div class="cardroot"
+          width=${this._gaugeWidth}
+          height="calc(
+            ${this._gaugeHeight}px +
+              ${this._config.shadow_bottom?this._config.shadow_bottom:0}px
+          )"
+      >
         <div
-          id="container"
+          class="container"
           width=${this._gaugeWidth}
           height=${this._gaugeHeight}
         >
           <div
-            id="innercontainer"
+            class="innercontainer"
             width=${this._gaugeWidth}
             height=${this._gaugeHeight}
             @click=${this.clickHandler}
           >
-            <canvas id="canvaselement"> </canvas>
+            <canvas class="canvaselement"> </canvas>
           </div>
         </div>
-        <div id="shadow">
-          <div id="state" style="font-size: ${this._fontSize}">
+        <div class="shadow" height=${this._shadowHeight}>
+          <div class="state" style="font-size: ${this._fontSize}">
             ${this._config.name}
           </div>
         </div>
@@ -300,4 +296,4 @@
         background-color: #fce588;
         padding: 8px;
       }
-    `}clickHandler(e){var t;this._fire("hass-more-info",{entityId:null===(t=this._config)||void 0===t?void 0:t.entity})}_fire(e,t){var i,r=new Event(e,{bubbles:!0,cancelable:!1,composed:!0});return r.detail=t||{},null===(i=this.shadowRoot)||void 0===i||i.dispatchEvent(r),r}};var pe,me,ge;e([Y()],fe.prototype,"hass",void 0),e([Y()],fe.prototype,"_config",void 0),e([(pe="#canvaselement",(e,t)=>{const i={get(){return this.renderRoot.querySelector(pe)},enumerable:!0,configurable:!0};if(me){const r=void 0!==t?t:e.key,n="symbol"==typeof r?Symbol():"__"+r;i.get=function(){return void 0===this[n]&&(this[n]=this.renderRoot.querySelector(pe)),this[n]}}return void 0!==t?J(i,e,t):Z(i,e)})],fe.prototype,"_canvasElement",void 0),fe=e([(ge="canvas-gauge-card",e=>"function"==typeof e?((e,t)=>(window.customElements.define(e,t),t))(ge,e):((e,t)=>{const{kind:i,elements:r}=t;return{kind:i,elements:r,finisher(t){window.customElements.define(e,t)}}})(ge,e))],fe);export{fe as CanvasGaugeCard};
+    `}clickHandler(e){var t;this._fire("hass-more-info",{entityId:null===(t=this._config)||void 0===t?void 0:t.entity})}_fire(e,t){var i,r=new Event(e,{bubbles:!0,cancelable:!1,composed:!0});return r.detail=t||{},null===(i=this.shadowRoot)||void 0===i||i.dispatchEvent(r),r}};var pe,me,ge;e([Y()],fe.prototype,"hass",void 0),e([Y()],fe.prototype,"_config",void 0),e([(pe=".canvaselement",(e,t)=>{const i={get(){return this.renderRoot.querySelector(pe)},enumerable:!0,configurable:!0};if(me){const r=void 0!==t?t:e.key,n="symbol"==typeof r?Symbol():"__"+r;i.get=function(){return void 0===this[n]&&(this[n]=this.renderRoot.querySelector(pe)),this[n]}}return void 0!==t?J(i,e,t):Z(i,e)})],fe.prototype,"_canvasElement",void 0),fe=e([(ge="canvas-gauge-card",e=>"function"==typeof e?((e,t)=>(window.customElements.define(e,t),t))(ge,e):((e,t)=>{const{kind:i,elements:r}=t;return{kind:i,elements:r,finisher(t){window.customElements.define(e,t)}}})(ge,e))],fe);export{fe as CanvasGaugeCard};

[helto4real]

May be fixed... in #58