@orabana/dynamic-dashboard

A reusable Angular library for creating dynamic, interactive dashboards with drag-and-drop panels, responsive layouts, and flexible data binding.

Features

• 🎯 Declarative Configuration: Define dashboards using JSON/TypeScript configuration
• 🔄 Drag & Drop: Move and resize panels with intuitive interactions
• 📱 Responsive: Breakpoint-based layouts that adapt to different screen sizes
• 🔌 Extensible: Plugin system for custom widgets and data sources
• 💾 Persistent: Save and restore dashboard layouts and preferences
• 🎨 Themeable: PrimeNG integration with customizable styling
• ♿ Accessible: WCAG 2.1 AA compliant with full keyboard navigation

Installation

npm install @orabana/dynamic-dashboard

Quick Start

import { DashboardConfig } from '@orabana/dynamic-dashboard';

const config: DashboardConfig = {
  id: 'my-dashboard',
  title: 'Sales Dashboard',
  layouts: {
    lg: {
      cols: 12,
      rowHeight: 60,
      margin: [10, 10],
      items: [
        { panelId: 'chart1', x: 0, y: 0, w: 6, h: 4 },
        { panelId: 'table1', x: 6, y: 0, w: 6, h: 4 }
      ]
    }
  },
  panels: [
    {
      id: 'chart1',
      title: 'Revenue Chart',
      widget: {
        type: 'primeng:chart',
        bindings: {
          data: { mode: 'context', path: 'sales.revenue' }
        }
      }
    }
  ]
};

Development Status

This library is currently under development. The core types and interfaces are available, with components and services being implemented incrementally.

Completed

• ✅ Core type definitions and interfaces
• ✅ Configuration validation utilities
• ✅ Layout calculation utilities
• ✅ Data binding utilities

In Progress

• 🚧 Dashboard and Panel components
• 🚧 Widget registry system
• 🚧 Context and persistence services
• 🚧 PrimeNG widget presets

Building

To build the library, run:

ng build @orabana/dynamic-dashboard

Testing

To execute unit tests, run:

ng test @orabana/dynamic-dashboard

Documentation

Full documentation will be available once the implementation is complete. For now, refer to the TypeScript interfaces in the types directory for API details.

Contributing

This library is part of the Orabana component library suite. Please refer to the main project documentation for contribution guidelines.

License

MIT