{"id":31999449,"url":"https://github.com/TobyBackstrom/ngx-dashboard","last_synced_at":"2025-10-15T14:08:42.335Z","repository":{"id":309092516,"uuid":"1016558233","full_name":"TobyBackstrom/ngx-dashboard","owner":"TobyBackstrom","description":"Responsive drag-and-drop grid dashboards for your app","archived":false,"fork":false,"pushed_at":"2025-10-05T12:14:24.000Z","size":899,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-05T14:31:53.325Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TobyBackstrom.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-07-09T07:31:08.000Z","updated_at":"2025-10-05T12:14:27.000Z","dependencies_parsed_at":"2025-08-09T20:35:27.856Z","dependency_job_id":"dfa2da01-0633-4078-b801-50876d43e314","html_url":"https://github.com/TobyBackstrom/ngx-dashboard","commit_stats":null,"previous_names":["tobybackstrom/ngx-dashboard"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/TobyBackstrom/ngx-dashboard","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TobyBackstrom%2Fngx-dashboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TobyBackstrom%2Fngx-dashboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TobyBackstrom%2Fngx-dashboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TobyBackstrom%2Fngx-dashboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TobyBackstrom","download_url":"https://codeload.github.com/TobyBackstrom/ngx-dashboard/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TobyBackstrom%2Fngx-dashboard/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279085157,"owners_count":26100015,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-15T02:00:07.814Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-10-15T14:01:41.736Z","updated_at":"2025-10-15T14:08:42.330Z","avatar_url":"https://github.com/TobyBackstrom.png","language":"TypeScript","readme":"# ngx-dashboard\n\n\u003c!-- Badges --\u003e\n\u003cp\u003e\n  \u003c!-- CI Status --\u003e\n  \u003ca href=\"https://github.com/TobyBackstrom/ngx-dashboard/actions/workflows/ci.yml\"\u003e\n    \u003cimg src=\"https://github.com/TobyBackstrom/ngx-dashboard/actions/workflows/ci.yml/badge.svg\" alt=\"CI Pipeline\"\u003e\n  \u003c/a\u003e\n  \u003c!-- Typescript version --\u003e\n  \u003cimg src=\"https://img.shields.io/badge/TypeScript-5.8-blue.svg?logo=typescript\" alt=\"TypeScript 5.8\"\u003e\n  \u003c!-- Angular Version --\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Angular-v20-3178c6.svg?logo=angular\" alt=\"Angular 20\"\u003e\n  \u003c!-- License --\u003e\n  \u003ca href=\"https://github.com/TobyBackstrom/ngx-dashboard/blob/main/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/license-MIT-blue.svg\" alt=\"License\"\u003e\n  \u003c/a\u003e\n  \u003c!-- PRs Welcome --\u003e\n  \u003cimg src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg\" alt=\"PRs Welcome\"\u003e\n\u003c/p\u003e\n\nModern Angular workspace for building drag-and-drop grid dashboards with resizable cells and customizable widgets. Built with Angular 20+ standalone components, NgRx Signals state management, and Material Design 3 design system compliance.\n\n🎯 **[Live Demo](https://dragonworks.dev/ngx-dashboard/)** - Try the interactive demo application\n\n![Dashboard Screenshot](docs/dashboard.png)\n\n## 📦 Architecture\n\nThis workspace contains three main projects:\n\n### [@dragonworks/ngx-dashboard](./projects/ngx-dashboard)\n\nCore dashboard library providing the fundamental grid and widget management system:\n\n- **Grid System** - Responsive drag-and-drop grid with collision detection and boundary constraints\n- **Cell Components** - Resizable cells with live preview, context menus, and dual flat/elevated appearance modes\n- **Extensible Provider System** - Dependency injection-based architecture enabling custom dialog and UI implementations ([detailed docs](docs/provider-system-architecture.md))\n- **Error Handling** - Graceful fallback components for unknown widget types with state preservation\n\n### [@dragonworks/ngx-dashboard-widgets](./projects/ngx-dashboard-widgets)\n\nWidget collection library implementing Material Design 3 patterns:\n\n- **Arrow Widget** - Directional indicators with rotation, opacity, and background customization\n- **Label Widget** - Text display with responsive sizing using canvas-based optimization\n- **Clock Widget** - Analog/digital dual-mode clock with real-time updates, configurable formats, and second hand options\n- **Responsive Text Directive** - Automatic font scaling with ellipsis-free design and developer-friendly API\n\n### [Demo Application](./projects/demo)\n\nInteractive demonstration showcasing real-world usage patterns:\n\n- **Dashboard Management** - FAB speed dial controls with auto-loading from JSON configuration\n- **Theme System** - Material Design 3 theming with live theme switching and color token extraction\n- **Widget Gallery** - Drag-and-drop widget installation from palette\n- **Custom Widgets** - Examples using Sparkline and Sparkbar widgets with theme-responsive color configuration\n- **Persistence** - localStorage and file system persistence implementations\n\n## 🚀 Quick Start\n\n### Installation\n\n```bash\n# Core dashboard\nnpm install @dragonworks/ngx-dashboard\n\n# Widget collection (optional)\nnpm install @dragonworks/ngx-dashboard-widgets\n\n# Material Design support\nnpm install @angular/material @angular/cdk\n```\n\n### Versioning\n\nThe libraries maintain major version parity with Angular. While major versions are aligned, minor and patch versions may differ.\n\nFor example:\n\n- Angular 20.x.x → ngx-dashboard 20.y.z\n- Angular 21.x.x → ngx-dashboard 21.y.z\n\nThis ensures compatibility with your Angular version while allowing independent feature releases and bug fixes.\n\n### Usage Guide\n\nFor complete setup instructions, implementation examples, and best practices, see our comprehensive **[Usage Guide](USAGE.md)**.\n\nThe usage guide includes:\n- **Complete Setup** - App configuration, Material theming, and widget registration  \n- **Dashboard Implementation** - Component usage patterns from the demo app\n- **Custom Widget Creation** - Step-by-step widget development guide\n- **Advanced Features** - Persistence, context menus, and custom dialogs\n- **Troubleshooting** - Common setup issues and solutions\n\nQuick example for getting started:\n\n```typescript\n// app.config.ts - Register widgets on startup\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideEnvironmentInitializer(() =\u003e {\n      const dashboardService = inject(DashboardService);\n      dashboardService.registerWidgetType(LabelWidgetComponent);\n    }),\n  ],\n};\n```\n\n## 🛠️ Development\n\n### Prerequisites\n\n- Node.js 18+\n- Angular 20+\n- npm or yarn\n\n### Setup\n\n```bash\ngit clone \u003crepository-url\u003e\ncd ngx-dashboard\nnpm install\n```\n\n### Commands\n\n```bash\n# Development server\nnpm run start\n\n# Build all projects\nnpm run build\n\n# Run tests (370+ test cases)\nnpm test\n\n# Individual builds\nnpm run build:ngx-dashboard\nnpm run build:ngx-dashboard-widgets\n\n# Test with browser debugging\nng test\n```\n\n### Testing Strategy\n\n- **User-Focused** - Tests verify public API behavior, not implementation details\n- **Integration Tests** - Component-store interaction validation\n- **Pattern-Based** - Deterministic testing for time-dependent features using regex patterns\n- **Modern Testing Patterns** - Signal-based component testing with `fixture.componentRef.setInput()`\n\n## 🏗️ Technical Foundation\n\n### Modern Angular Architecture\n\n- **Standalone Components** - Complete standalone API adoption throughout\n- **NgRx Signals** - Signal-based state management with feature stores and computed arrays\n- **Signal-First Design** - Modern reactive patterns with input(), output(), computed(), and effect()\n- **OnPush Strategy** - 100% OnPush change detection with optimized performance\n- **TypeScript Strict Mode** - Complete type safety with minimal `unknown` usage\n- **Tree-Shakeable** - Optimized bundles with proper sideEffects configuration\n\n### Material Design 3 Integration\n\n- **Design Token System** - Comprehensive use of MD3 color tokens, typography, spacing, and motion variables\n- **Theme Integration** - Dynamic light/dark mode switching with proper surface hierarchy\n- **Component Styling** - Layout-focused CSS that respects Material themes and design patterns\n- **Responsive Design** - Container queries and adaptive layouts\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit changes (`git commit -m 'Add amazing feature'`)\n4. Ensure tests pass (`npm test`)\n5. Push to branch (`git push origin feature/amazing-feature`)\n6. Open a Pull Request\n\n### Guidelines\n\n- Follow existing code patterns\n- Use modern Angular APIs (signals, standalone)\n- Add tests for new features\n- Update documentation as needed\n\n## 🗺️ Roadmap\n\n### Near Term\n\n- [ ] Widget state type safety improvements\n- [ ] Additional widget examples (charts, gauges, data tables)\n- [ ] Keyboard navigation enhancements\n- [ ] Widget grouping and templates\n\n### Future Considerations\n\n- [ ] Advanced layout algorithms\n- [ ] Performance monitoring widgets\n- [ ] Dashboard versioning and history\n\n## 📄 License\n\nMIT License - see [LICENSE](LICENSE) file for details\n\n## 🔗 Resources\n\n- [Angular](https://angular.dev/)\n- [NgRx Signals](https://ngrx.io/guide/signals)\n- [Angular Material](https://material.angular.io/)\n- [Material Design 3](https://m3.material.io/)\n- [GitHub Repository](https://github.com/TobyBackstrom/ngx-dashboard)\n- [NPM Package - Core](https://www.npmjs.com/package/@dragonworks/ngx-dashboard)\n- [NPM Package - Widgets](https://www.npmjs.com/package/@dragonworks/ngx-dashboard-widgets)\n","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Drag and Drop"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTobyBackstrom%2Fngx-dashboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FTobyBackstrom%2Fngx-dashboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTobyBackstrom%2Fngx-dashboard/lists"}