@kumori/aurora-wui-components 0.0.295 → 0.0.296

package/dist/components/table-chart/table-chart.d.ts

@@ -8,6 +8,7 @@ export declare class TableChart extends LitElement {
     chartOptions: ChartOptions;
     height: string;
     private chartInstance;
+    private _resizeObserver;
     static styles: import('lit').CSSResult[];
     private createChart;
     protected firstUpdated(): void;

package/dist/components/table-chart/table-chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-chart.d.ts","sourceRoot":"","sources":["../../../src/components/table-chart/table-chart.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAwB,MAAM,KAAK,CAAC;AAIvD,qBACa,UAAW,SAAQ,UAAU;IACZ,SAAS,EAAE,MAAM,iBAAiB,CAAU;IAC5C,OAAO,SAAM;IACd,WAAW,EAAE,MAAM,EAAE,CAAM;IACtB,aAAa,EAAE,YAAY,EAAE,CAAM;IACnC,YAAY,EAAE,YAAY,CAAM;IACpC,MAAM,SAAU;IAE5C,OAAO,CAAC,aAAa,CAAsB;IAE3C,MAAM,CAAC,MAAM,4BAQX;IAEF,OAAO,CAAC,WAAW;IA0BnB,SAAS,CAAC,YAAY;IAItB,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IA4BzD,oBAAoB;IAQpB,MAAM;CASP"}
+{"version":3,"file":"table-chart.d.ts","sourceRoot":"","sources":["../../../src/components/table-chart/table-chart.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAwB,MAAM,KAAK,CAAC;AAIvD,qBACa,UAAW,SAAQ,UAAU;IACZ,SAAS,EAAE,MAAM,iBAAiB,CAAU;IAC5C,OAAO,SAAM;IACd,WAAW,EAAE,MAAM,EAAE,CAAM;IACtB,aAAa,EAAE,YAAY,EAAE,CAAM;IACnC,YAAY,EAAE,YAAY,CAAM;IACpC,MAAM,SAAU;IAE5C,OAAO,CAAC,aAAa,CAAsB;IAC3C,OAAO,CAAC,eAAe,CAA+B;IAEtD,MAAM,CAAC,MAAM,4BAaX;IAEF,OAAO,CAAC,WAAW;IA6BnB,SAAS,CAAC,YAAY;IAUtB,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IA4BzD,oBAAoB;IAUpB,MAAM;CASP"}

package/dist/index.js

@@ -8922,9 +8922,15 @@ var TableChart = class TableChart extends LitElement {
 		this.chartOptions = {};
 		this.height = "4rem";
 		this.chartInstance = null;
+		this._resizeObserver = null;
 	}
 	static {
 		this.styles = [unsafeCSS(tailwind_default), css`
+      :host {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
       canvas {
         width: 100% !important;
         height: 100% !important;
@@ -8943,6 +8949,7 @@ var TableChart = class TableChart extends LitElement {
 			return;
 		}
 		if (this.chartInstance) return;
+		if (this.offsetWidth === 0 || this.offsetHeight === 0) return;
 		this.chartInstance = new Chart(ctx, {
 			type: this.chartType,
 			data: {
@@ -8954,6 +8961,10 @@ var TableChart = class TableChart extends LitElement {
 	}
 	firstUpdated() {
 		this.createChart();
+		this._resizeObserver = new ResizeObserver(() => {
+			if (!this.chartInstance) this.createChart();
+		});
+		this._resizeObserver.observe(this);
 	}
 	updated(changedProperties) {
 		super.updated(changedProperties);
@@ -8976,6 +8987,8 @@ var TableChart = class TableChart extends LitElement {
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
+		this._resizeObserver?.disconnect();
+		this._resizeObserver = null;
 		if (this.chartInstance) {
 			this.chartInstance.destroy();
 			this.chartInstance = null;