design.estate/dees-catalog
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Jürgen Kunz
2026-04-01 05:00:21 +00:00
parent b1c8a7446e
commit af1f660486
78 changed files with 429 additions and 399 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
ts_web/elements/00group-chart/dees-chart-area/component.ts
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;
}

10
ts_web/elements/00group-chart/dees-chart-area/demo.ts
View File

@@ -44,8 +44,8 @@ export const demoFunc = () => {
// Get the chart elements
const chartElement = elementArg.querySelector('#main-chart') as DeesChartArea;
const connectionsChartElement = elementArg.querySelector('#connections-chart') as DeesChartArea;
let intervalId: number;
let connectionsIntervalId: number;
let intervalId: number | null;
let connectionsIntervalId: number | null;
let currentDataset = 'system';
// Y-axis formatters for different datasets
@@ -71,7 +71,7 @@ export const demoFunc = () => {
// Generate initial data points for time window
const generateInitialData = (baseValue: number, variance: number, interval: number = DATA_POINT_INTERVAL) => {
const data = [];
const data: Array<{ x: string; y: number }> = [];
const now = Date.now();
const pointCount = Math.floor(TIME_WINDOW / interval);
@@ -240,10 +240,10 @@ export const demoFunc = () => {
// Switch dataset
const switchDataset = (name: string) => {
currentDataset = name;
const dataset = datasets[name];
const dataset = (datasets as Record<string, any>)[name];
chartElement.label = dataset.label;
chartElement.series = dataset.series;
chartElement.yAxisFormatter = formatters[name];
chartElement.yAxisFormatter = (formatters as Record<string, any>)[name];
// Set appropriate y-axis scaling
if (name === 'system') {

4
ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.demo.ts
View File

@@ -8,8 +8,8 @@ export const demoFunc = () => {
// Get the log elements
const structuredLog = elementArg.querySelector('#structured-log') as DeesChartLog;
const rawLog = elementArg.querySelector('#raw-log') as DeesChartLog;
let structuredIntervalId: number;
let rawIntervalId: number;
let structuredIntervalId: number | null;
let rawIntervalId: number | null;
const serverSources = ['Server', 'Database', 'API', 'Auth', 'Cache', 'Queue', 'WebSocket', 'Scheduler'];