Add @types/plotly.js-dist-mon

Author: bzh2610

package-lock.json

@@ -20,8 +20,9 @@
     "@angular/platform-browser-dynamic": "^20.0.2",
     "@angular/router": "^20.0.2",
     "plotly.js-dist": "^2.20.0",
+    "plotly.js-dist-min": "^3.1.1",
     "rxjs": "~7.8.0",
-    "tslib": "^2.3.1",
+    "tslib": "^2.8.1",
     "zone.js": "^0.15.1"
   },
   "devDependencies": {
@@ -36,8 +37,9 @@
     "@types/jasmine": "~4.3.1",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",
-    "@typescript-eslint/eslint-plugin": "^7.2.0",
-    "@typescript-eslint/parser": "^7.2.0",
+    "@types/plotly.js-dist-min": "^2.3.4",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
     "coveralls": "^3.1.1",
     "eslint": "^8.57.0",
     "jasmine-core": "~4.6.0",
@@ -51,4 +53,4 @@
     "ts-node": "~10.9.1",
     "typescript": "~5.8.3"
   }
-}
+}

package.json

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import {Data, Layout} from "plotly.js-dist-min";
 
 @Component({
     selector: 'app-root',
@@ -11,9 +12,9 @@ export class AppComponent {
 
    public graph = {
         data: [
-            { x: [1, 2, 3], y: [2, 6, 3], type: 'scatter', mode: 'lines+points', marker: {color: 'red'} },
+            { x: [1, 2, 3], y: [2, 6, 3], type: 'scatter', mode: 'lines+markers', marker: {color: 'red'} },
             { x: [1, 2, 3], y: [2, 5, 3], type: 'bar' },
-        ],
-        layout: {width: 320, height: 240, title: 'A Fancy Plot'}
+        ] satisfies Data[],
+        layout: {width: 320, height: 240, title: { text: 'A Fancy Plot'}} satisfies Partial<Layout>
     };
 }

projects/demo_app/src/app/app.component.ts

@@ -4,7 +4,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { PlotlyComponent } from './plotly.component';
 import { PlotlyService } from './plotly.service';
 
-import PlotlyJS from 'plotly.js-dist';
+import PlotlyJS, { Plots } from 'plotly.js-dist-min';
 
 
 PlotlyService.setPlotly(PlotlyJS);
@@ -20,8 +20,7 @@ describe('PlotlyComponent', () => {
 
         TestBed.configureTestingModule({
             imports: [PlotlyComponent],
-            providers: [
-                PlotlyService,
+            providers: [PlotlyService,
             ],
         }).compileComponents();
     });
@@ -199,21 +198,21 @@ describe('PlotlyComponent', () => {
         await component.createPlot();
         await fixture.whenStable();
 
-        spyOn(PlotlyJS.Plots, 'resize').and.callThrough();
+        spyOn(Plots, 'resize').and.callThrough();
 
         window.dispatchEvent(new Event('resize'));
         await fixture.whenStable();
 
-        expect(PlotlyJS.Plots.resize).toHaveBeenCalled();
-        PlotlyJS.Plots.resize.calls.reset();
+        expect(Plots.resize).toHaveBeenCalled();
+        Plots.resize.calls.reset();
 
         fixture.destroy();
         await fixture.whenStable();
 
         window.dispatchEvent(new Event('resize'));
         await fixture.whenStable();
 
-        expect(PlotlyJS.Plots.resize).not.toHaveBeenCalled();
+        expect(Plots.resize).not.toHaveBeenCalled();
     });
 
 

projects/plotly/src/lib/plotly.component.spec.ts

@@ -21,7 +21,7 @@ import {
 import { CommonModule } from '@angular/common';
 
 import { PlotlyService } from './plotly.service';
-import { Plotly } from './plotly.interface';
+import { PlotlyHTMLElement, Data, Layout, Config } from 'plotly.js-dist-min';
 
 // @dynamic
 @Component({
@@ -36,17 +36,17 @@ import { Plotly } from './plotly.interface';
 export class PlotlyComponent implements OnInit, OnChanges, OnDestroy, DoCheck {
     protected defaultClassName = 'js-plotly-plot';
 
-    public plotlyInstance?: Plotly.PlotlyHTMLElement;
-    public resizeHandler?: (instance: Plotly.PlotlyHTMLElement) => void;
+    public plotlyInstance?: PlotlyHTMLElement;
+    public resizeHandler?: (instance: PlotlyHTMLElement) => void;
     public layoutDiffer?: KeyValueDiffer<string, any>;
-    public dataDiffer?: IterableDiffer<Plotly.Data>;
+    public dataDiffer?: IterableDiffer<Data>;
 
     @ViewChild('plot', { static: true }) plotEl!: ElementRef;
 
-    data = input<Plotly.Data[]>();
-    layout = input<Partial<Plotly.Layout>>();
-    config = input<Partial<Plotly.Config>>();
-    frames = input<Partial<Plotly.Config>[]>();
+    data = input<Data[]>();
+    layout = input<Partial<Layout>>();
+    config = input<Partial<Config>>();
+    frames = input<Partial<Config>[]>();
     style = input<{ [key: string]: string }>();
 
     divId = input<string>();
@@ -59,9 +59,21 @@ export class PlotlyComponent implements OnInit, OnChanges, OnDestroy, DoCheck {
     updateOnDataChange = input(true);
     updateOnlyWithRevision = input(false);
 
-    initialized = output<Plotly.Figure>();
-    update = output<Plotly.Figure>();
-    purge = output<Plotly.Figure>();
+    initialized = output< {
+        data: Data[];
+        layout: Partial<Layout>;
+        frames: Partial<Config>;
+    }>();
+    update = output< {
+        data: Data[];
+        layout: Partial<Layout>;
+        frames: Partial<Config>;
+    }>();
+    purge = output< {
+        data: Data[];
+        layout: Partial<Layout>;
+        frames: Partial<Config>;
+    }>();
     error = output<Error>();
 
     afterExport = output();
@@ -124,7 +136,7 @@ export class PlotlyComponent implements OnInit, OnChanges, OnDestroy, DoCheck {
         this.createPlot().then(() => {
             const figure = this.createFigure();
             this.initialized.emit(figure);
-        });        
+        });
     }
 
     ngOnDestroy(): void {
@@ -198,7 +210,7 @@ export class PlotlyComponent implements OnInit, OnChanges, OnDestroy, DoCheck {
         }
     }
 
-    getData(): Plotly.Data[] {
+    getData(): Data[] {
         return this.data() ?? [];
     }
 
@@ -248,9 +260,13 @@ export class PlotlyComponent implements OnInit, OnChanges, OnDestroy, DoCheck {
         });
     }
 
-    createFigure(): Plotly.Figure {
+    createFigure():  {
+        data: Data[];
+        layout: Partial<Layout>;
+        frames: Partial<Config>;
+    } {
         const p: any = this.plotlyInstance;
-        const figure: Plotly.Figure = {
+        const figure = {
             data: p.data,
             layout: p.layout,
             frames: p._transitionData ? p._transitionData._frames : null

projects/plotly/src/lib/plotly.component.ts

@@ -2,7 +2,7 @@ import { TestBed, inject } from '@angular/core/testing';
 import PlotlyJS from 'plotly.js-dist';
 
 import { PlotlyService } from './plotly.service';
-import { Plotly } from './plotly.interface';
+import {PlotlyHTMLElement} from "plotly.js-dist-min";
 
 describe('PlotlyService', () => {
     beforeEach(() => {
@@ -13,7 +13,7 @@ describe('PlotlyService', () => {
     });
 
     it('should get a plotly instance by id', inject([PlotlyService], (service: PlotlyService) => {
-        const instance = { id: 'aidi' } as Plotly.PlotlyHTMLElement;
+        const instance = { id: 'aidi' } as PlotlyHTMLElement;
 
         PlotlyService.insert(instance);
         expect(service.getInstanceByDivId('aidi')).toBe(instance);

projects/plotly/src/lib/plotly.interface.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Plotly } from './plotly.interface';
+import {Config, Data, Layout, PlotlyHTMLElement} from "plotly.js-dist-min";
 
 type PlotlyName = 'PlotlyJS' | 'ViaCDN' | 'ViaWindow' | undefined;
 
@@ -8,7 +8,7 @@ type PlotlyName = 'PlotlyJS' | 'ViaCDN' | 'ViaWindow' | undefined;
     providedIn: 'root'
 })
 export class PlotlyService {
-    protected static instances: Plotly.PlotlyHTMLElement[] = [];
+    protected static instances: PlotlyHTMLElement[] = [];
     public static plotly?: any = undefined;
     protected static moduleName?: PlotlyName = undefined;
 
@@ -29,23 +29,23 @@ export class PlotlyService {
         PlotlyService.plotly = plotly;
     }
 
-    public static insert(instance: Plotly.PlotlyHTMLElement): Plotly.PlotlyHTMLElement {
+    public static insert(instance: PlotlyHTMLElement): PlotlyHTMLElement {
         const index = PlotlyService.instances.indexOf(instance);
         if (index === -1) {
             PlotlyService.instances.push(instance);
         }
         return instance;
     }
 
-    public static remove(div: Plotly.PlotlyHTMLElement): void {
+    public static remove(div: PlotlyHTMLElement): void {
         const index = PlotlyService.instances.indexOf(div);
         if (index >= 0) {
             PlotlyService.instances.splice(index, 1);
             PlotlyService.plotly.purge(div);
         }
     }
 
-    public getInstanceByDivId(id: string): Plotly.PlotlyHTMLElement | undefined {
+    public getInstanceByDivId(id: string): PlotlyHTMLElement | undefined {
         for (const instance of PlotlyService.instances) {
             if (instance && instance.id === id) {
                 return instance;
@@ -81,7 +81,7 @@ export class PlotlyService {
         });
     }
 
-    public async newPlot(div: HTMLDivElement, data: Plotly.Data[], layout?: Partial<Plotly.Layout>, config?: Partial<Plotly.Config>, frames?: Partial<Plotly.Config>[]): Promise<any> {
+    public async newPlot(div: HTMLDivElement, data: Data[], layout?: Partial<Layout>, config?: Partial<Config>, frames?: Partial<Config>[]): Promise<any> {
         await this.waitFor(() => this._getPlotly() !== 'waiting');
 
         if (frames) {
@@ -92,7 +92,7 @@ export class PlotlyService {
         return this._getPlotly().newPlot(div, data, layout, config).then(() => PlotlyService.insert(div as any)) as Promise<any>;
     }
 
-    public plot(div: Plotly.PlotlyHTMLElement, data: Plotly.Data[], layout?: Partial<Plotly.Layout>, config?: Partial<Plotly.Config>, frames?: Partial<Plotly.Config>[]): Promise<any> {
+    public plot(div: PlotlyHTMLElement, data: Data[], layout?: Partial<Layout>, config?: Partial<Config>, frames?: Partial<Config>[]): Promise<any> {
         if (frames) {
             const obj = { data, layout, config, frames };
             return this._getPlotly().newPlot(div, obj) as Promise<any>;
@@ -101,7 +101,7 @@ export class PlotlyService {
         return this._getPlotly().newPlot(div, data, layout, config) as Promise<any>;
     }
 
-    public update(div: Plotly.PlotlyHTMLElement, data: Plotly.Data[], layout?: Partial<Plotly.Layout>, config?: Partial<Plotly.Config>, frames?: Partial<Plotly.Config>[]): Promise<any> {
+    public update(div: PlotlyHTMLElement, data: Data[], layout?: Partial<Layout>, config?: Partial<Config>, frames?: Partial<Config>[]): Promise<any> {
         if (frames) {
             const obj = { data, layout, config, frames };
             return this._getPlotly().react(div, obj) as Promise<any>;
@@ -110,7 +110,7 @@ export class PlotlyService {
         return this._getPlotly().react(div, data, layout, config) as Promise<any>;
     }
 
-    public resize(div: Plotly.PlotlyHTMLElement): void {
+    public resize(div: PlotlyHTMLElement): void {
         return this._getPlotly().Plots.resize(div);
     }
 }