Panel Event Forms

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>`;
}