@dragonworks/ngx-dashboard-widgets 20.1.2 → 20.1.3

package/README.md

@@ -1,6 +1,7 @@
 # @dragonworks/ngx-dashboard-widgets
 
-Comprehensive widget collection for ngx-dashboard with Material Design 3 compliance and advanced features.
+Example widget collection for ngx-dashboard with Material Design 3 compliance and advanced features.
+You can use these widgets as inspiration or as a base for your own implementations.
 
 ## Installation
 
@@ -13,38 +14,42 @@ npm install @dragonworks/ngx-dashboard-widgets @dragonworks/ngx-dashboard
 - Angular 20.2.0+
 - @dragonworks/ngx-dashboard 20.0.0+
 
-## Included Widgets
+## Included Example Widgets
 
 ### ArrowWidget
+
 - **Directional indicators** with 360° rotation control
 - **Configurable appearance**: Size, color, rotation angle
 - **Material Design icons** with currentColor theme support
 - **Settings dialog** for interactive configuration
 
 ### LabelWidget
+
 - **Text display** with rich formatting options
 - **Responsive sizing** with alignment controls
 - **Background customization** with theme-aware colors
 - **Font size controls** with min/max constraints
 
 ### ClockWidget
+
 - **Dual-mode display**: Analog and digital formats
 - **Real-time updates** with automatic timer management
 - **Configurable formats**: 12h/24h time, seconds display
 - **Component composition**: Separate analog/digital components
-- **MD3 theming** with background toggle
 
 ### RadialGaugeWidget
+
 - **Semi-circular gauge** for value visualization
-- **Dual-mode system**: Passive (SVG icon) and active (component) display
-- **Sophisticated text rendering**: SVG-native with BBox scaling
+- **Responsive text rendering**: SVG-native with BBox scaling
 - **Theme integration** with MD3 color tokens
 - **Performance optimized** with signal-based updates
 
 ## Components & Utilities
 
 ### RadialGaugeComponent
-Standalone high-performance SVG gauge component:
+
+Standalone SVG gauge component:
+
 - **Dynamic sizing** with ResizeObserver integration
 - **Mathematical positioning** using computed transforms
 - **Reference text system** for consistent measurements
@@ -52,7 +57,9 @@ Standalone high-performance SVG gauge component:
 - **Accessibility features** with ARIA attributes
 
 ### ResponsiveTextDirective
-Canvas-optimized text sizing directive:
+
+Text sizing directive:
+
 - **Automatic font scaling** to fit container
 - **Performance optimized** with canvas measurement
 - **Developer-friendly API**: minFontSize/maxFontSize inputs
@@ -63,51 +70,38 @@ Canvas-optimized text sizing directive:
 ### Basic Widget Registration
 
 ```typescript
-import { Injectable } from '@angular/core';
-import { DashboardService } from '@dragonworks/ngx-dashboard';
-import { 
-  ArrowWidgetComponent,
-  LabelWidgetComponent,
-  ClockWidgetComponent,
-  RadialGaugeWidgetComponent 
-} from '@dragonworks/ngx-dashboard-widgets';
-
-@Injectable({ providedIn: 'root' })
-export class WidgetRegistrationService {
-  constructor(private dashboardService: DashboardService) {
-    this.registerWidgets();
-  }
-
-  private registerWidgets() {
-    // Register all widgets
-    this.dashboardService.registerWidgetType(ArrowWidgetComponent.metadata);
-    this.dashboardService.registerWidgetType(LabelWidgetComponent.metadata);
-    this.dashboardService.registerWidgetType(ClockWidgetComponent.metadata);
-    this.dashboardService.registerWidgetType(RadialGaugeWidgetComponent.metadata);
-  }
-}
+// app.config.ts - Register widgets on startup
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes),
+    provideHttpClient(),
+    provideEnvironmentInitializer(() => {
+      const dashboardService = inject(DashboardService);
+      dashboardService.registerWidgetType(ArrowWidgetComponent);
+      dashboardService.registerWidgetType(LabelWidgetComponent);
+      dashboardService.registerWidgetType(ClockWidgetComponent);
+      dashboardService.registerWidgetType(RadialGaugeWidgetComponent);
+      dashboardService.registerWidgetType(RealtimeGaugeWidgetComponent);
+      dashboardService.registerWidgetType(SparklineWidgetComponent);
+      dashboardService.registerWidgetType(SparkbarWidgetComponent);
+    }),
+  ],
+};
 ```
 
 ### Using RadialGaugeComponent Standalone
 
 ```typescript
-import { Component } from '@angular/core';
-import { RadialGaugeComponent } from '@dragonworks/ngx-dashboard-widgets';
+import { Component } from "@angular/core";
+import { RadialGaugeComponent } from "@dragonworks/ngx-dashboard-widgets";
 
 @Component({
-  selector: 'app-metrics',
+  selector: "app-metrics",
   standalone: true,
   imports: [RadialGaugeComponent],
-  template: `
-    <ngx-dashboard-radial-gauge
-      [value]="cpuUsage"
-      [minValue]="0"
-      [maxValue]="100"
-      [label]="'CPU Usage'"
-      [unit]="'%'"
-      [showValueLabel]="true">
-    </ngx-dashboard-radial-gauge>
-  `
+  template: ` <ngx-dashboard-radial-gauge [value]="cpuUsage" [minValue]="0" [maxValue]="100" [label]="'CPU Usage'" [unit]="'%'" [showValueLabel]="true"> </ngx-dashboard-radial-gauge> `,
 })
 export class MetricsComponent {
   cpuUsage = 75;
@@ -117,23 +111,18 @@ export class MetricsComponent {
 ### Using ResponsiveText Directive
 
 ```typescript
-import { Component } from '@angular/core';
-import { ResponsiveTextDirective } from '@dragonworks/ngx-dashboard-widgets';
+import { Component } from "@angular/core";
+import { ResponsiveTextDirective } from "@dragonworks/ngx-dashboard-widgets";
 
 @Component({
-  selector: 'app-display',
+  selector: "app-display",
   standalone: true,
   imports: [ResponsiveTextDirective],
   template: `
     <div class="container">
-      <span 
-        ngxDashboardResponsiveText
-        [minFontSize]="12"
-        [maxFontSize]="48">
-        Responsive Text
-      </span>
+      <span ngxDashboardResponsiveText [minFontSize]="12" [maxFontSize]="48"> Responsive Text </span>
     </div>
-  `
+  `,
 })
 export class DisplayComponent {}
 ```
@@ -141,8 +130,8 @@ export class DisplayComponent {}
 ## Creating Custom Widgets
 
 ```typescript
-import { Component, signal } from '@angular/core';
-import { Widget, WidgetMetadata } from '@dragonworks/ngx-dashboard';
+import { Component, signal } from "@angular/core";
+import { Widget, WidgetMetadata } from "@dragonworks/ngx-dashboard";
 
 interface MyWidgetState {
   text: string;
@@ -150,29 +139,29 @@ interface MyWidgetState {
 }
 
 @Component({
-  selector: 'my-custom-widget',
+  selector: "my-custom-widget",
   standalone: true,
   template: `
     <div [style.color]="state().color">
       {{ state().text }}
     </div>
   `,
-  styleUrl: './my-custom-widget.component.scss'
+  styleUrl: "./my-custom-widget.component.scss",
 })
 export class MyCustomWidgetComponent implements Widget {
   static readonly metadata: WidgetMetadata = {
-    widgetTypeid: '@myapp/my-custom-widget',
-    name: 'My Custom Widget',
-    description: 'A custom widget example',
-    svgIcon: '<svg>...</svg>' // Your SVG icon
+    widgetTypeid: "@myapp/my-custom-widget",
+    name: "My Custom Widget",
+    description: "A custom widget example",
+    svgIcon: "<svg>...</svg>", // Your SVG icon
   };
 
   state = signal<MyWidgetState>({
-    text: 'Hello World',
-    color: 'var(--mat-sys-primary)'
+    text: "Hello World",
+    color: "var(--mat-sys-primary)",
   });
 
-  // Optional: Implement widget lifecycle methods
+  // Optional: Implement widget state methods
   dashboardGetState(): MyWidgetState {
     return this.state();
   }
@@ -189,23 +178,12 @@ export class MyCustomWidgetComponent implements Widget {
 }
 ```
 
-## Architecture Highlights
-
-- **Material Design 3**: Full compliance with MD3 design tokens and theming
-- **Signal-based Architecture**: Modern Angular signals throughout
-- **Component Composition**: Reusable sub-components for complex widgets
-- **Performance Optimized**: OnPush change detection, canvas measurements
-- **TypeScript Strict**: Full type safety with no `any` types
-- **Standalone Components**: All components are standalone (Angular 20+)
-- **Theme Integration**: Seamless light/dark mode support
-
 ## Design Patterns
 
-- **Dual-Mode Display**: Widgets support passive (icon) and active (component) modes
 - **Settings Dialogs**: Each widget includes MD3-compliant configuration dialogs
 - **Responsive Sizing**: All widgets adapt to container dimensions
-- **State Management**: Signal-based state with proper lifecycle handling
-- **SVG Rendering**: High-quality vector graphics with currentColor support
+- **State Management**: Signal-based state with lifecycle handling
+- **SVG Rendering**: Vector graphics with currentColor support
 
 ## Documentation
 

package/fesm2022/dragonworks-ngx-dashboard-widgets.mjs

@@ -2242,6 +2242,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
 /*
  * Public API Surface of ngx-dashboard-widgets
  */
+// Widget Components
 
 /**
  * Generated bundle index. Do not edit.