Enhanced Panel Component Pattern

Create dashboard panel components using vanilla TypeScript (no framework, no JSX). Each panel is a class extending a Panel base class, now with enhanced event handling and form validation examples.

Architecture Overview

Panel (base class)
├── element: HTMLElement (outer container, .panel)
│   ├── header: HTMLElement (.panel-header)
│   │   ├── headerLeft (.panel-header-left)
│   │   │   ├── title (.panel-title)
│   │   │   └── newBadge (.panel-new-badge) [optional]
│   │   ├── statusBadge (.panel-data-badge) [optional]
│   │   └── countEl (.panel-count) [optional]
│   ├── content: HTMLElement (.panel-content)
│   └── resizeHandle (.panel-resize-handle)

Base Panel Class (Simplified for this project)

Create src/components/Panel.ts:

export interface PanelOptions {
  id: string;
  title: string;
  showCount?: boolean;
  className?: string;
}

export class Panel {
  protected element: HTMLElement;
  protected content: HTMLElement;
  protected header: HTMLElement;
  protected countEl: HTMLElement | null = null;
  protected panelId: string;
  private _fetching = false;

  constructor(options: PanelOptions) {
    this.panelId = options.id;
    this.element = document.createElement('div');
    this.element.className = `panel ${options.className || ''}`;
    this.element.dataset.panel = options.id;

    // Header
    this.header = document.createElement('div');
    this.header.className = 'panel-header';

    const headerLeft = document.createElement('div');
    headerLeft.className = 'panel-header-left';

    const title = document.createElement('span');
    title.className = 'panel-title';
    title.textContent = options.title;
    headerLeft.appendChild(title);
    this.header.appendChild(headerLeft);

    // Count badge (optional)
    if (options.showCount) {
      this.countEl = document.createElement('span');
      this.countEl.className = 'panel-count';
      this.countEl.textContent = '0';
      this.header.appendChild(this.countEl);
    }

    // Content area
    this.content = document.createElement('div');
    this.content.className = 'panel-content';
    this.content.id = `${options.id}Content`;

    this.element.appendChild(this.header);
    this.element.appendChild(this.content);
    this.showLoading();
  }

  public getElement(): HTMLElement { return this.element; }

  public showLoading(message = 'Loading...'): void {
    this.content.innerHTML = `
     <div class="panel-loading">
        <div class="panel-loading-spinner"></div>
        <div class="panel-loading-text">${message}</div>
      </div>`;
  }

  public showError(message = 'Failed to load', onRetry?: () => void): void {
    this.content.innerHTML = `
      <div class="panel-error-state">
        <div class="panel-error-msg">${message}</div>
        ${onRetry ? '<button class="panel-retry-btn" data-panel-retry>Retry</button>' : ''}
      </div>`;
    if (onRetry) {
      this.content.querySelector('[data-panel-retry]')?.addEventListener('click', onRetry);
    }
  }

  public setContent(html: string): void {
    this.content.innerHTML = html;
  }

  public setCount(count: number): void {
    if (this.countEl) this.countEl.textContent = count.toString();
  }

  public show(): void { this.element.classList.remove('hidden'); }
  public hide(): void { this.element.classList.add('hidden'); }

  protected setFetching(v: boolean): void { this._fetching = v; }
  protected get isFetching(): boolean { return this._fetching; }

  public destroy(): void {
    this.element.remove();
  }
}

Creating a Concrete Panel (Example: FinancePanel)

Each panel extends Panel and manages its own data fetching + rendering, now with enhanced event handling and form validation:

import { Panel } from './Panel';

interface Transaction {
  id: string;
  amount: number;
  description: string;
  date: string;
  category: string;
}

export class FinancePanel extends Panel {
  private transactions: Transaction[] = [];
  private balance: number = 0;

  constructor() {
    super({ id: 'finance', title: 'Finance Tracker', showCount: true });
    this.loadTransactions();
    this.render();
  }

  private loadTransactions(): void {
    const saved = localStorage.getItem('finance-transactions');
    if (saved) {
      this.transactions = JSON.parse(saved);
      this.balance = this.transactions.reduce((sum, t) => sum + t.amount, 0);
    }
  }

  private saveTransactions(): void {
    localStorage.setItem('finance-transactions', JSON.stringify(this.transactions));
  }

  private render(): void {
    const formHtml = `
      <form id="financeForm" class="finance-form">
        <div class="form-group">
          <label for="amount">Amount</label>
          <input type="number" id="amount" name="amount" required>
          <div class="error-message" id="amountError"></div>
        </div>
        <div class="form-group">
          <label for="description">Description</label>
          <input type="text" id="description" name="description" required>
          <div class="error-message" id="descriptionError"></div>
        </div>
        <button type="submit">Add Transaction</button>
      </form>
    `;

    const transactionsHtml = this.transactions.map(t => `
      <div class="transaction">
        <span class="transaction-date">${t.date}</span>
        <span class="transaction-description">${t.description}</span>
        <span class="transaction-amount ${t.amount >= 0 ? 'positive' : 'negative'}">
          ${t.amount >= 0 ? '+' : ''}${t.amount.toFixed(2)}
        </span>
      </div>
    `).join('');

    this.setContent(`
      <div class="finance-container">
        <div class="balance">Balance: $${this.balance.toFixed(2)}</div>
        ${formHtml}
        <div class="transactions">${transactionsHtml}</div>
      </div>
    `);

    this.setupForm();
  }

  private setupForm(): void {
    const form = this.content.querySelector('#financeForm') as HTMLFormElement;
    if (!form) return;

    form.addEventListener('submit', (e) => {
      e.preventDefault();
      if (this.validateForm()) {
        this.addTransaction();
      }
    });
  }

  private validateForm(): boolean {
    let isValid = true;
    const amountInput = this.content.querySelector('#amount') as HTMLInputElement;
    const descriptionInput = this.content.querySelector('#description') as HTMLInputElement;
    const amountError = this.content.querySelector('#amountError') as HTMLElement;
    const descriptionError = this.content.querySelector('#descriptionError') as HTMLElement;

    // Reset errors
    amountError.textContent = '';
    descriptionError.textContent = '';

    // Validate amount
    if (!amountInput.value) {
      amountError.textContent = 'Amount is required';
      isValid = false;
    } else if (isNaN(parseFloat(amountInput.value))) {
      amountError.textContent = 'Amount must be a number';
      isValid = false;
    }

    // Validate description
    if (!descriptionInput.value) {
      descriptionError.textContent = 'Description is required';
      isValid = false;
    }

    return isValid;
  }

  private addTransaction(): void {
    const amountInput = this.content.querySelector('#amount') as HTMLInputElement;
    const descriptionInput = this.content.querySelector('#description') as HTMLInputElement;

    const transaction: Transaction = {
      id: Date.now().toString(),
      amount: parseFloat(amountInput.value),
      description: descriptionInput.value,
      date: new Date().toLocaleDateString(),
      category: 'General',
    };

    this.transactions.push(transaction);
    this.balance += transaction.amount;
    this.saveTransactions();
    this.render();
  }

  public override destroy(): void {
    // Clean up any event listeners
    super.destroy();
  }
}

Key Patterns

1. Constructor calls super() with panel config, then loads initial data
2. Form Handling includes validation and submission logic
3. Event Listeners are properly set up and cleaned up in destroy()
4. Local Storage is used for persistent data
5. Validation provides user feedback on form errors
6. Dynamic Updates reflect changes immediately in the UI

Sparkline Utility

export function miniSparkline(data: number[] | undefined, change: number | null, w = 50, h = 16): string {
  if (!data || data.length < 2) return '';
  const min = Math.min(...data);
  const max = Math.max(...data);
  const range = max - min || 1;
  const color = change != null && change >= 0 ? 'var(--green)' : 'var(--red)';
  const points = data.map((v, i) => {
    const x = (i / (data.length - 1)) * w;
    const y = h - ((v - min) / range) * (h - 2) - 1;
    return `${x.toFixed(1)},${y.toFixed(1)}`;
  }).join(' ');
  return `<svg width="${w}" height="${h}" viewBox="0 0 ${w} ${h}"><polyline points="${points}" fill="none" stroke="${color}" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
}