Dynamic Dashboard Library

A comprehensive Angular library for creating dynamic, responsive dashboards with drag-and-drop functionality, query generators, widgets, and theming support.

Features

• 🎯 Dynamic Dashboard: Drag-and-drop dashboard with gridster integration
• 🔍 Query Generator: Visual SQL query builder with schema exploration
• 📊 Rich Widgets: Analytics, charts, revenue tracking, and more
• 🎨 Theming System: Built-in theme support with CSS custom properties
• 📱 Responsive Design: Mobile-first responsive layouts
• 🔧 Template System: Save and reuse dashboard templates
• 🎛️ Widget Configuration: Customizable widget settings and options
• 📈 Chart Integration: Chart.js integration for data visualization
• 🔌 Superset Integration: Apache Superset embedded dashboards
• 💾 Export Capabilities: PDF and Excel export functionality

Installation

npm install @kavinda-d/dynamic-dashboard

Peer Dependencies

Make sure you have the following peer dependencies installed:

npm install @angular/animations@^20.1.0 @angular/cdk@^20.1.0 @angular/common@^20.1.0 @angular/core@^20.1.0 @angular/forms@^20.1.0 @angular/material@^20.1.0 @angular/platform-browser@^20.1.0 @angular/router@^20.1.0 angular-gridster2@^20.0.0 bootstrap@^5.3.0

Quick Start

1. Import the Module

import { NgModule } from '@angular/core';
import { DynamicDashboardModule } from '@kavinda-d/dynamic-dashboard';

@NgModule({
  imports: [
    DynamicDashboardModule
  ]
})
export class AppModule { }

2. Use Components

<!-- Main Dashboard -->
<dd-home></dd-home>

<!-- Query Generator Widget -->
<dd-query-generator></dd-query-generator>

<!-- Individual Widgets -->
<dd-revenue></dd-revenue>
<dd-analytics></dd-analytics>
<dd-subscriber></dd-subscriber>

3. Include Styles

Add to your angular.json or import in your main styles file:

@import '@kavinda-d/dynamic-dashboard/styles';
@import '@kavinda-d/dynamic-dashboard/theme';

Components

Core Components

• HomeComponent (dd-home): Main dashboard with gridster layout
• WidgetComponent (dd-widget): Base widget container
• TemplatesComponent (dd-templates): Template management interface

Widget Components

• QueryGeneratorComponent (dd-query-generator): Visual SQL query builder
• AnelyticsComponent (dd-analytics): Analytics dashboard widget
• RevenueComponent (dd-revenue): Revenue tracking widget
• SubscriberComponent (dd-subscriber): Subscriber metrics widget
• ViewsComponent (dd-views): Views analytics widget
• WatchTimeComponent (dd-watch-time): Watch time analytics widget

Shared Components

• SidebarComponent (dd-sidebar): Navigation sidebar
• BreadcrumbComponent (dd-breadcrumb): Navigation breadcrumbs
• ThemeSettingsComponent (dd-theme-settings): Theme configuration
• ToastComponent (dd-toast): Notification toasts

Services

Core Services

• DashboardService: Dashboard state management
• TemplateService: Template CRUD operations
• ThemeService: Theme management and switching
• ToastService: Notification management
• StorageService: Local storage utilities
• ConfirmationService: Confirmation dialogs

Integration Services

• SupersetService: Apache Superset integration

Configuration

Theme Configuration

import { ThemeService } from '@kavinda-d/dynamic-dashboard';

constructor(private themeService: ThemeService) {}

// Switch themes
this.themeService.setTheme('dark');
this.themeService.setTheme('light');

// Get current theme
const currentTheme = this.themeService.getCurrentTheme();

Dashboard Configuration

import { DashboardService, GridsterConfig } from '@kavinda-d/dynamic-dashboard';

const dashboardConfig: GridsterConfig = {
  gridType: 'fit',
  compactType: 'none',
  margin: 10,
  outerMargin: true,
  mobileBreakpoint: 640,
  minCols: 1,
  maxCols: 100,
  minRows: 1,
  maxRows: 100,
  maxItemCols: 100,
  minItemCols: 1,
  maxItemRows: 100,
  minItemRows: 1,
  defaultItemCols: 1,
  defaultItemRows: 1,
  fixedColWidth: 105,
  fixedRowHeight: 105,
  keepFixedHeightInMobile: false,
  keepFixedWidthInMobile: false,
  scrollSensitivity: 10,
  scrollSpeed: 20,
  enableEmptyCellClick: false,
  enableEmptyCellContextMenu: false,
  enableEmptyCellDrop: false,
  enableEmptyCellDrag: false,
  emptyCellDragMaxCols: 50,
  emptyCellDragMaxRows: 50,
  ignoreMarginInRow: false,
  draggable: {
    enabled: true,
  },
  resizable: {
    enabled: true,
  },
  swap: false,
  pushItems: true,
  disablePushOnDrag: false,
  disablePushOnResize: false,
  pushDirections: {pushToNorth: true, pushToEast: true, pushToSouth: true, pushToWest: true},
  pushResizeItems: false,
  displayGrid: 'onDrag&Resize',
  disableWindowResize: false
};

Styling

The library uses CSS custom properties for theming. You can customize the appearance by overriding these variables:

:root {
  --primary: #3b82f6;
  --primary-foreground: #ffffff;
  --secondary: #f1f5f9;
  --secondary-foreground: #0f172a;
  --background: #ffffff;
  --foreground: #0f172a;
  --surface: #ffffff;
  --surface-variant: #f8fafc;
  --outline: #e2e8f0;
  --radius: 0.5rem;
  --radius-lg: 0.75rem;
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
  --transition: all 0.2s ease-in-out;
}

Examples

Basic Dashboard Setup

import { Component } from '@angular/core';
import { GridsterConfig, GridsterItem } from '@kavinda-d/dynamic-dashboard';

@Component({
  selector: 'app-dashboard',
  template: `
    <dd-home 
      [options]="options" 
      [dashboard]="dashboard">
    </dd-home>
  `
})
export class DashboardComponent {
  options: GridsterConfig = {
    gridType: 'fit',
    compactType: 'none',
    margin: 10,
    draggable: { enabled: true },
    resizable: { enabled: true }
  };

  dashboard: Array<GridsterItem> = [
    { cols: 2, rows: 1, y: 0, x: 0, type: 'revenue' },
    { cols: 2, rows: 2, y: 0, x: 2, type: 'analytics' },
    { cols: 4, rows: 2, y: 1, x: 0, type: 'query-generator' }
  ];
}

Custom Widget Integration

import { Component } from '@angular/core';

@Component({
  selector: 'app-custom-widget',
  template: `
    <dd-widget 
      [item]="widgetConfig"
      [options]="widgetOptions">
      <div class="custom-content">
        <!-- Your custom widget content -->
      </div>
    </dd-widget>
  `
})
export class CustomWidgetComponent {
  widgetConfig = {
    cols: 2,
    rows: 2,
    y: 0,
    x: 0,
    type: 'custom'
  };

  widgetOptions = {
    title: 'Custom Widget',
    showHeader: true,
    showSettings: true
  };
}

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

For support, email [email protected] or create an issue on GitHub.

Changelog

v1.0.0

• Initial release
• Complete dashboard functionality
• Query generator component
• Widget system
• Theme support
• Template management
• Export capabilities