fix(ts_web): resolve TypeScript nullability and event typing issues across web components
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user