Add Dumbbell & Tilemap examples, optional module-load timeout, and expanded tests/docs

README.md

@@ -331,6 +331,7 @@ import { HighchartsChartDirective } from 'highcharts-angular';
           import('highcharts/esm/modules/exporting'),
         ];
       },
+      timeout: 900, // Optional: increase timeout for loading modules
     }),
   ],
 })
@@ -412,6 +413,12 @@ export class StockComponent {
 }
 ```
 
+**Note:**
+
+- Some Highcharts modules have dependencies and must be loaded in a specific order.
+- In such cases, use a promise chain (e.g., `import('highcharts/esm/highcharts-more').then(() => import('highcharts/esm/modules/dumbbell'))`)
+- instead of just listing them as array items. This ensures the dependent module loads only after its dependency.
+
 ### To load a wrapper
 
 A wrapper is a [custom extension](https://www.highcharts.com/docs/extending-highcharts/extending-highcharts) for Highcharts. To load a wrapper in the same way as a module, save it as a JavaScript file and add the following code to the beginning and end of the file:

highcharts-angular/src/lib/highcharts-chart.component.spec.ts

@@ -0,0 +1,167 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import type Highcharts from 'highcharts/esm/highcharts';
+import { HighchartsChartComponent } from './highcharts-chart.component';
+import { HighchartsChartService } from './highcharts-chart.service';
+import { provideHighcharts, providePartialHighcharts } from './highcharts-chart.provider';
+import { ModuleFactoryFunction } from './types';
+
+/**
+ * Minimal host component to attach per-test module providers via TestBed.overrideComponent.
+ * We keep it simple to focus on DI and async loading behavior.
+ */
+@Component({
+  selector: 'highcharts-test',
+  template: `<highcharts-chart [options]="{}" />`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [HighchartsChartComponent],
+  standalone: true,
+})
+class TestComponent {}
+
+describe('TestComponent / HighchartsChartService (load module)', () => {
+  beforeEach(async () => {
+    // 1) Register the standalone host + core Highcharts provider.
+    //    - provideHighcharts(): should wire up HIGHCHARTS_LOADER, etc., so the service can load core Highcharts.
+    await TestBed.configureTestingModule({
+      imports: [TestComponent],
+      providers: [provideHighcharts()],
+    }).compileComponents();
+  });
+
+  it('resolves HighchartsChartService from the component injector', () => {
+    const fixture = TestBed.createComponent(TestComponent);
+    fixture.detectChanges();
+
+    // 2) Resolve the service from the component’s injector to honor component-level provider overrides.
+    const service = fixture.debugElement.injector.get(HighchartsChartService);
+    expect(service).toBeTruthy();
+  });
+
+  // ---------------------------------------------------------------------------
+  // Parameterized checks for different Highcharts modules.
+  //
+  // For each case, we:
+  //  - override the component’s providers to supply the module list
+  //  - create the fixture (activates providers)
+  //  - wait for the microtasks/imports to settle (fixture.whenStable)
+  //  - assert that the Highcharts instance contains the expected augmented APIs
+  // ---------------------------------------------------------------------------
+
+  type Case = {
+    title: string;
+    modules: ModuleFactoryFunction;
+    assert(hc: any): void;
+    timeout?: number;
+  };
+
+  const CASES: Case[] = [
+    {
+      title: 'map → exposes Highcharts.MapChart',
+      modules: () => [import('highcharts/esm/modules/map')],
+      assert: (hc: typeof Highcharts) => {
+        expect(hc.MapChart).toBeDefined();
+        expect(typeof hc.MapChart).toBe('function');
+      },
+    },
+    {
+      title: 'tilemap → exposes Highcharts.seriesTypes.tilemap',
+      modules: () => [import('highcharts/esm/modules/tilemap')],
+      assert: hc => {
+        expect(hc.seriesTypes?.tilemap).toBeDefined();
+      },
+    },
+    {
+      title: 'highcharts-more → exposes arearange series + dumbbell → exposes Highcharts.seriesTypes.dumbbell',
+      modules: () => [import('highcharts/esm/highcharts-more').then(() => import('highcharts/esm/modules/dumbbell'))],
+      assert: hc => {
+        expect(hc.seriesTypes?.arearange).toBeDefined();
+        expect(hc.seriesTypes?.dumbbell).toBeDefined();
+      },
+      timeout: 2000,
+    },
+    {
+      title: 'pattern-fill → adds SVGRenderer.addPattern',
+      modules: () => [import('highcharts/esm/modules/pattern-fill')],
+      assert: hc => {
+        // pattern-fill augments the renderer with addPattern utility
+        expect(typeof hc.SVGRenderer?.prototype?.addPattern).toBe('function');
+      },
+    },
+    {
+      title: 'gantt → exposes Highcharts.ganttChart or Highcharts.GanttChart',
+      modules: () => [import('highcharts/esm/modules/gantt')],
+      assert: hc => {
+        // Some versions expose both; at least one must exist.
+        const ok = typeof hc.ganttChart === 'function' || typeof hc.GanttChart === 'function';
+        expect(ok).toBeTrue();
+      },
+    },
+  ];
+
+  for (const c of CASES) {
+    it(`attaches expected API when module is provided: ${c.title}`, async () => {
+      // 3) Provide the module(s) at the component level. This mirrors your real component’s
+      //    `providers: [providePartialHighcharts({ modules: () => [...] })]`.
+      TestBed.overrideComponent(TestComponent, {
+        set: { providers: [providePartialHighcharts({ modules: c.modules, timeout: c.timeout })] },
+      });
+
+      const fixture = TestBed.createComponent(TestComponent);
+      fixture.detectChanges();
+
+      // 4) Get the service from this component’s injector scope
+      const service = fixture.debugElement.injector.get(HighchartsChartService);
+      expect(service).toBeTruthy();
+
+      // 5) Wait for all async work to stabilize:
+      //    - dynamic imports for modules
+      //    - the service’s microtasks and internal timers (your working test already relies on whenStable)
+      await fixture.whenStable();
+
+      // 6) Read the Highcharts instance from the signal
+      const hc = service.highcharts();
+      expect(hc).toBeTruthy();
+
+      // 7) Case-specific assertions for the module’s side effects
+      c.assert(hc);
+    });
+  }
+
+  it('can load multiple modules together (map + tilemap + more + dumbbell + pattern-fill + gantt)', async () => {
+    TestBed.overrideComponent(TestComponent, {
+      set: {
+        providers: [
+          providePartialHighcharts({
+            modules: () => [
+              import('highcharts/esm/modules/map'),
+              import('highcharts/esm/modules/tilemap'),
+              import('highcharts/esm/modules/gantt'),
+              import('highcharts/esm/highcharts-more').then(() => import('highcharts/esm/modules/dumbbell')),
+              import('highcharts/esm/modules/pattern-fill'),
+            ],
+          }),
+        ],
+      },
+    });
+
+    const fixture = TestBed.createComponent(TestComponent);
+    fixture.detectChanges();
+
+    const service = fixture.debugElement.injector.get(HighchartsChartService);
+    expect(service).toBeTruthy();
+
+    await fixture.whenStable();
+
+    const hc: any = service.highcharts();
+    expect(hc).toBeTruthy();
+
+    // Consolidated assertions (quick smoke for “all together”)
+    expect(typeof hc.MapChart).toBe('function'); // map
+    expect(hc.seriesTypes?.tilemap).toBeDefined(); // tilemap
+    expect(hc.seriesTypes?.arearange).toBeDefined(); // highcharts-more
+    expect(hc.seriesTypes?.dumbbell).toBeDefined(); // dumbbell
+    expect(typeof hc.SVGRenderer?.prototype?.addPattern).toBe('function'); // pattern-fill
+    expect(typeof hc.ganttChart === 'function' || typeof hc.GanttChart === 'function').toBeTrue(); // gantt
+  });
+});

highcharts-angular/src/lib/highcharts-chart.directive.ts

@@ -14,7 +14,7 @@ import {
 } from '@angular/core';
 import { isPlatformServer } from '@angular/common';
 import { HighchartsChartService } from './highcharts-chart.service';
-import { HIGHCHARTS_CONFIG } from './highcharts-chart.token';
+import { HIGHCHARTS_CONFIG, HIGHCHARTS_TIMEOUT } from './highcharts-chart.token';
 import { ChartConstructorType, ConstructorChart } from './types';
 import type Highcharts from 'highcharts/esm/highcharts';
 
@@ -58,6 +58,10 @@ export class HighchartsChartDirective {
     optional: true,
   });
 
+  private readonly timeout = inject(HIGHCHARTS_TIMEOUT, {
+    optional: true,
+  });
+
   private readonly highchartsChartService = inject(HighchartsChartService);
 
   private readonly constructorChart = computed<ConstructorChart | undefined>(() => {
@@ -68,8 +72,13 @@ export class HighchartsChartDirective {
     return undefined;
   });
 
+  private delay(ms: number): Promise<void> {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+
   // Create the chart as soon as we can
-  private readonly chart = computed(() => {
+  private readonly chart = computed(async () => {
+    await this.delay(this.relativeConfig?.timeout ?? this.timeout ?? 500);
     return this.constructorChart()?.(
       this.el.nativeElement,
       // Use untracked, so we don't re-create new chart everytime options change
@@ -82,14 +91,16 @@ export class HighchartsChartDirective {
   });
 
   private keepChartUpToDate(): void {
-    effect(() => {
+    effect(async () => {
+      // Wait for the chart to be created
       this.update();
-      this.chart()?.update(this.options(), true, this.oneToOne());
+      const chart = await this.chart();
+      chart?.update(this.options(), true, this.oneToOne());
     });
   }
 
-  private destroyChart(): void {
-    const chart = this.chart();
+  private async destroyChart(): Promise<void> {
+    const chart = await this.chart();
     if (chart) {
       // #56
       chart.destroy();

highcharts-angular/src/lib/highcharts-chart.provider.ts

@@ -4,6 +4,7 @@ import {
   HIGHCHARTS_CONFIG,
   HIGHCHARTS_ROOT_MODULES,
   HIGHCHARTS_OPTIONS,
+  HIGHCHARTS_TIMEOUT,
 } from './highcharts-chart.token';
 import { ModuleFactoryFunction, HighchartsConfig, PartialHighchartsConfig, InstanceFactoryFunction } from './types';
 import type Highcharts from 'highcharts/esm/highcharts';
@@ -34,9 +35,10 @@ export function providePartialHighcharts(config: PartialHighchartsConfig): Provi
 }
 
 export function provideHighcharts(config: HighchartsConfig = {}): EnvironmentProviders {
-  const providers: EnvironmentProviders[] = [
+  const providers: (Provider | EnvironmentProviders)[] = [
     provideHighchartsInstance(config.instance),
     provideHighchartsRootModules(config.modules ?? emptyModuleFactoryFunction),
+    { provide: HIGHCHARTS_TIMEOUT, useValue: config.timeout },
   ];
   if (config.options) {
     providers.push(provideHighchartsOptions(config.options));

highcharts-angular/src/lib/highcharts-chart.service.ts

@@ -5,8 +5,7 @@ import type Highcharts from 'highcharts/esm/highcharts';
 
 @Injectable({ providedIn: 'root' })
 export class HighchartsChartService {
-  private readonly writableHighcharts = signal<typeof Highcharts | null>(null);
-  public readonly highcharts = this.writableHighcharts.asReadonly();
+  public readonly highcharts = signal<typeof Highcharts | null>(null);
 
   private readonly loader = inject(HIGHCHARTS_LOADER);
   private readonly globalOptions = inject(HIGHCHARTS_OPTIONS, {
@@ -19,7 +18,7 @@ export class HighchartsChartService {
   private async loadHighchartsWithModules(partialConfig: PartialHighchartsConfig | null): Promise<typeof Highcharts> {
     const highcharts = await this.loader(); // Ensure Highcharts core is loaded
 
-    await Promise.all([...(this.globalModules?.() ?? []), ...(partialConfig?.modules?.() ?? [])]);
+    await Promise.allSettled([...(this.globalModules?.() ?? []), ...(partialConfig?.modules?.() ?? [])]);
 
     // Return the Highcharts instance
     return highcharts;
@@ -30,8 +29,7 @@ export class HighchartsChartService {
       if (this.globalOptions) {
         highcharts.setOptions(this.globalOptions);
       }
-      // add timeout to make sure the loader has attached all modules
-      setTimeout(() => this.writableHighcharts.set(highcharts), 100);
+      this.highcharts.set(highcharts);
     });
   }
 }

highcharts-angular/src/lib/highcharts-chart.token.ts

@@ -6,3 +6,4 @@ export const HIGHCHARTS_LOADER = new InjectionToken<InstanceFactoryFunction>('HI
 export const HIGHCHARTS_ROOT_MODULES = new InjectionToken<ModuleFactoryFunction>('HIGHCHARTS_ROOT_MODULES');
 export const HIGHCHARTS_OPTIONS = new InjectionToken<Highcharts.Options>('HIGHCHARTS_OPTIONS');
 export const HIGHCHARTS_CONFIG = new InjectionToken<PartialHighchartsConfig>('HIGHCHARTS_CONFIG');
+export const HIGHCHARTS_TIMEOUT = new InjectionToken<number>('HIGHCHARTS_TIMEOUT');

highcharts-angular/src/lib/types.ts

@@ -21,6 +21,11 @@ export type PartialHighchartsConfig = {
    * Include Highcharts additional modules (e.g., exporting, accessibility) or custom themes
    */
   modules?: ModuleFactoryFunction;
+  /**
+   * Timeout in milliseconds to wait for the Highcharts library to load
+   * Default is 500ms
+   */
+  timeout?: number;
 };
 
 export type HighchartsConfig = {

package.json

@@ -17,6 +17,7 @@
     "run:ssr": "node dist/my-ssr-app/server/server.mjs",
     "test": "ng test my-app",
     "lint": "ng lint",
+    "prettier": "prettier . --write",
     "release": "cd ./highcharts-angular && standard-version && cd ../ && node tasks/build.js && node tasks/release.js",
     "release-minor": "cd ./highcharts-angular && standard-version --release-as minor  && cd ../ && node tasks/build.js && node tasks/release.js",
     "release-major": "cd ./highcharts-angular && standard-version --release-as major  && cd ../ && node tasks/build.js && node tasks/release.js",

src/app/app.component.html

@@ -2,6 +2,8 @@
   <app-line-chart class="card" />
   <app-stock-chart class="card" />
   <app-map-chart class="card" />
+  <app-tilemap-chart class="card" />
   <app-gantt-chart class="card" />
   <app-lazy-loading-chart class="card" />
+  <app-dumbbell-chart class="card" />
 </main>

src/app/app.component.ts

@@ -4,12 +4,22 @@ import { StockChartComponent } from './stock-chart/stock-chart.component';
 import { MapChartComponent } from './map-chart/map-chart.component';
 import { GanttChartComponent } from './gantt-chart/gantt-chart.component';
 import { LazyLoadingChartComponent } from './lazy-loading-chart/lazy-loading-chart.component';
+import { TilemapChartComponent } from './tilemap-chart/tilemap-chart.component';
+import { DumbbellChartComponent } from './dumbbell-chart/dumbbell-chart.component';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',
-  imports: [LineChartComponent, StockChartComponent, MapChartComponent, GanttChartComponent, LazyLoadingChartComponent],
+  imports: [
+    LineChartComponent,
+    StockChartComponent,
+    MapChartComponent,
+    GanttChartComponent,
+    LazyLoadingChartComponent,
+    TilemapChartComponent,
+    DumbbellChartComponent,
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {}

src/app/dumbbell-chart/dumbbell-chart.component.css

@@ -0,0 +1,11 @@
+h2 {
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 1.25rem;
+  margin: 0 0 1.5rem 0;
+}
+
+.main {
+  width: 100%;
+  height: 650px;
+  display: block;
+}

src/app/dumbbell-chart/dumbbell-chart.component.html

@@ -0,0 +1,4 @@
+<article>
+  <h2>Demo #8: Highcharts Dumbbell</h2>
+  <highcharts-chart class="main" [options]="options" />
+</article>