fix(ts_web): resolve TypeScript nullability and event typing issues across web components

This commit is contained in:
2026-04-01 05:00:21 +00:00
parent b1c8a7446e
commit af1f660486
78 changed files with 429 additions and 399 deletions

View File

@@ -37,7 +37,7 @@ export class DeesChartArea extends DeesElement {
// instance
@state()
accessor chart: ApexCharts;
accessor chart!: ApexCharts;
@property()
accessor label: string = 'Untitled Chart';
@@ -68,8 +68,8 @@ export class DeesChartArea extends DeesElement {
@property({ type: Number })
accessor autoScrollInterval: number = 1000; // Auto-scroll interval in milliseconds (0 to disable)
private resizeObserver: ResizeObserver;
private resizeTimeout: number;
private resizeObserver!: ResizeObserver;
private resizeTimeout!: number;
private internalChartData: ApexAxisChartSeries = [];
private autoScrollTimer: number | null = null;
private readonly DEBUG_RESIZE = false; // Set to true to enable resize debugging
@@ -132,7 +132,7 @@ export class DeesChartArea extends DeesElement {
if (this.chart) {
try {
this.chart.destroy();
this.chart = null;
this.chart = null as any;
} catch (error) {
console.error('Error destroying chart:', error);
}
@@ -170,14 +170,14 @@ export class DeesChartArea extends DeesElement {
await new Promise(resolve => requestAnimationFrame(resolve));
// Get actual dimensions of the container
const mainbox: HTMLDivElement = this.shadowRoot.querySelector('.mainbox');
const chartContainer: HTMLDivElement = this.shadowRoot.querySelector('.chartContainer');
const mainbox: HTMLDivElement | null = this.shadowRoot!.querySelector('.mainbox');
const chartContainer: HTMLDivElement | null = this.shadowRoot!.querySelector('.chartContainer');
if (!mainbox || !chartContainer) {
console.error('Chart containers not found');
return;
}
// Calculate initial dimensions
const styleChartContainer = window.getComputedStyle(chartContainer);
const paddingTop = parseInt(styleChartContainer.paddingTop, 10);
@@ -368,7 +368,7 @@ export class DeesChartArea extends DeesElement {
};
try {
this.chart = new ApexChartsLib(this.shadowRoot.querySelector('.chartContainer'), options);
this.chart = new ApexChartsLib(this.shadowRoot!.querySelector('.chartContainer')!, options);
await this.chart.render();
// Give the chart a moment to fully initialize before resizing
@@ -376,7 +376,7 @@ export class DeesChartArea extends DeesElement {
await this.resizeChart();
// Ensure resize observer is watching the mainbox
const mainbox = this.shadowRoot.querySelector('.mainbox');
const mainbox = this.shadowRoot!.querySelector('.mainbox');
if (mainbox && this.resizeObserver) {
// Disconnect any previous observations
this.resizeObserver.disconnect();
@@ -572,9 +572,9 @@ export class DeesChartArea extends DeesElement {
}
try {
const mainbox: HTMLDivElement = this.shadowRoot.querySelector('.mainbox');
const chartContainer: HTMLDivElement = this.shadowRoot.querySelector('.chartContainer');
const mainbox: HTMLDivElement | null = this.shadowRoot!.querySelector('.mainbox');
const chartContainer: HTMLDivElement | null = this.shadowRoot!.querySelector('.chartContainer');
if (!mainbox || !chartContainer) {
return;
}