debut

dist/index.d.ts

@@ -1,8 +1,11 @@
 import { GaugeTimeSerie, GaugeOptions, Stat } from './types';
 import { ChartwerkPod } from '@chartwerk/core';
 export declare class ChartwerkGaugePod extends ChartwerkPod<GaugeTimeSerie, GaugeOptions> {
+    lastHeight: number;
+    lastWidth: number;
     constructor(el: HTMLElement, _series?: GaugeTimeSerie[], _options?: GaugeOptions);
     renderMetrics(): void;
+    _waitForLoadAndRender(): void;
     get _gaugeTransform(): string;
     get _gaugeCenter(): string;
     get _minWH(): number;

src/index.ts

@@ -51,6 +51,9 @@ const DEFAULT_GAUGE_OPTIONS: GaugeOptions = {
 };
 
 export class ChartwerkGaugePod extends ChartwerkPod<GaugeTimeSerie, GaugeOptions> {
+  lastHeight = -1;
+  lastWidth = -1;
+  
   constructor(el: HTMLElement, _series: GaugeTimeSerie[] = [], _options: GaugeOptions = {}) {
     super(
       d3, el, _series,
@@ -64,10 +67,22 @@ export class ChartwerkGaugePod extends ChartwerkPod<GaugeTimeSerie, GaugeOptions
       return;
     }
 
+    this._waitForLoadAndRender();
+  }
+
+  _waitForLoadAndRender(): void {
+    if(this.width !== this.lastWidth && this.height !== this.lastHeight) {
+      this.lastWidth = this.width;
+      this.lastHeight = this.height;
+      setTimeout(() => {
+        this._waitForLoadAndRender();
+      }, 500);
+    } else {
       this._renderValueArc();
       this._renderThresholdArc();
       this._renderValue();
     }
+  }
 
   get _gaugeTransform(): string {
     return `translate(${this.width / 2},${0.8 * this.height})`;
@@ -78,9 +93,6 @@ export class ChartwerkGaugePod extends ChartwerkPod<GaugeTimeSerie, GaugeOptions
   }
 
   get _minWH(): number {
-    console.log(this.width, this.height);
-    console.log(this.d3Node.node().offsetWidth, this.d3Node.node().offsetHeight)
-    console.log(this.d3Node)
     return _.min([0.6 * this.width, this.height]);
   }