Netty Dashboard Library

This library provides a flexible and customizable dashboard system for Angular applications. It allows users to add, remove, and rearrange widgets in a responsive grid layout. The dashboard supports drag-and-drop functionality and persists widget configurations between sessions.

Installation

To install the ntydashboard library in your project, run the following command:

npm install ntydashboard

Setup

Import and configure the dashboard in your Angular application:

import { DashboardService } from "@nettyapps/ntydashboard";
import { RevenueWidget } from "./your-widgets/revenue"; // Your custom widget

@Component({
  // component metadata
})
export class AppComponent implements OnInit {
  constructor(private dashboardService: DashboardService) {
    // Register your widgets
    const widgets = [
      {
        id: 8,
        label: "Revenue",
        content: RevenueWidget,
        rows: 2,
        columns: 2,
        backgroundColor: "#4CAF50",
      },
      // Add more widgets as needed
      // {
      //   id: 9,
      //   label: 'Customers',
      //   content: CustomersWidget,
      //   rows: 3,
      //   columns: 1
      // }
    ];

    widgets.forEach((widget) => this.dashboardService.registerWidget(widget));
  }

  ngOnInit() {
    // Load saved dashboard configuration
    this.dashboardService.fetchWidgets();
  }
}