Merge pull request #73 from ngfelixl/feat/plot-configuration

feat: add optional config to plot function

Author: ngfelixl

README.md

@@ -1,11 +1,9 @@
 # <img src="./img/nodeplotlib_64x64.png" width="22px" height="22px"> NodePlotLib
 
 [![NodeJS CI](https://github.com/ngfelixl/nodeplotlib/workflows/Node.js%20CI/badge.svg)](https://github.com/ngfelixl/nodeplotlib/actions?query=workflow%3A%22Node.js+CI%22)
-[![Coverage Status](https://coveralls.io/repos/github/ngfelixl/nodeplotlib/badge.svg?branch=master)](https://coveralls.io/github/ngfelixl/nodeplotlib?branch=master)
 [![npm](https://img.shields.io/npm/v/nodeplotlib?color=#00f800)](https://npmjs.com/package/nodeplotlib)
 [![npm](https://img.shields.io/npm/dt/nodeplotlib.svg)](https://npmjs.com/package/nodeplotlib)
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
-[![Gitter chat](https://badges.gitter.im/gitterHQ/gitter.png)](https://gitter.im/nodeplotlib/)
 
 [![Animation (View on Github)](https://raw.githubusercontent.com/ngfelixl/nodeplotlib/master/img/animation-next.gif)](https://raw.githubusercontent.com/ngfelixl/nodeplotlib/master/img/animation-next.gif)
 

apps/web/src/app/app.module.ts

@@ -7,12 +7,10 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './components/app/app.component';
 import { TutorialComponent } from './components/tutorial/tutorial.component';
-import { PlotsService } from './services/plots.service';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatListModule } from '@angular/material/list';
 import { PlotComponent } from './components/plot/plot.component';
 import { PlotsComponent } from './components/plots/plots.component';
-import { SocketService } from './services/socket.service';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
@@ -39,7 +37,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
     MatIconModule,
     MatTooltipModule,
   ],
-  providers: [PlotsService, SocketService],
+  providers: [],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

apps/web/src/app/components/plot/plot.component.ts

@@ -28,7 +28,7 @@ export class PlotComponent implements AfterViewInit, OnChanges {
       this.plotContainer.nativeElement,
       this.plotData.data,
       { ...(this.plotData.layout ?? {}), autosize: true },
-      { responsive: true }
+      { ...(this.plotData.config ?? {}), responsive: true }
     );
   }
 
@@ -38,7 +38,7 @@ export class PlotComponent implements AfterViewInit, OnChanges {
         this.plotContainer.nativeElement,
         this.plotData.data,
         { ...(this.plotData.layout ?? {}), autosize: true },
-        { responsive: true }
+        { ...(this.plotData.config ?? {}), responsive: true }
       );
     }
   }

apps/web/src/app/services/plots.service.ts

@@ -1,10 +1,10 @@
 import { Injectable } from '@angular/core';
 import { PlotData } from '@npl/nodeplotlib';
 import { BehaviorSubject } from 'rxjs';
-import { SocketService } from './socket.service';
 import { map } from 'rxjs/operators';
+import { SocketService } from './socket.service';
 
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class PlotsService {
   private plotDataMap$ = new BehaviorSubject<Map<number, PlotData>>(new Map());
   plots$ = this.plotDataMap$.pipe(

apps/web/src/app/services/socket.service.ts

@@ -2,7 +2,7 @@ import { Injectable, OnDestroy } from '@angular/core';
 import { io, Socket } from 'socket.io-client';
 import { environment } from '../../environments/environment';
 
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class SocketService implements OnDestroy {
   private socket: Socket;
 

libs/nodeplotlib/README.md

@@ -1,11 +1,9 @@
 # <img src="https://raw.githubusercontent.com/ngfelixl/nodeplotlib/master/img/nodeplotlib_64x64.png" width="28px" height="28px"> NodePlotLib
 
 [![NodeJS CI](https://github.com/ngfelixl/nodeplotlib/workflows/Node.js%20CI/badge.svg)](https://github.com/ngfelixl/nodeplotlib/actions?query=workflow%3A%22Node.js+CI%22)
-[![Coverage Status](https://coveralls.io/repos/github/ngfelixl/nodeplotlib/badge.svg?branch=master)](https://coveralls.io/github/ngfelixl/nodeplotlib?branch=master)
 [![npm](https://img.shields.io/npm/v/nodeplotlib?color=#00f800)](https://npmjs.com/package/nodeplotlib)
 [![npm](https://img.shields.io/npm/dt/nodeplotlib.svg)](https://npmjs.com/package/nodeplotlib)
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
-[![Gitter chat](https://badges.gitter.im/gitterHQ/gitter.png)](https://gitter.im/nodeplotlib/)
 
 [![Animation (View on Github)](https://raw.githubusercontent.com/ngfelixl/nodeplotlib/master/img/animation-next.gif)](https://raw.githubusercontent.com/ngfelixl/nodeplotlib/master/img/animation-next.gif)
 
@@ -85,13 +83,17 @@ plot(stream$);
 There are three exports. The `plot` function and types for the Plot and for the Layout.
 
 ```typescript
-import { plot, Plot, Layout } from 'nodeplotlib';
+import { plot, Plot, Layout, Config } from 'nodeplotlib';
 ```
 
 The `plot` function has the following structure
 
 ```typescript
-function plot(data: Plot[] | Observable<Plot[]>, layout?: Layout): void;
+function plot(
+  data: Plot[] | Observable<Plot[]>,
+  layout?: Layout,
+  config?: Config
+): void;
 ```
 
 It does not return a Subscription for the Observables because you just need to close

libs/nodeplotlib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodeplotlib",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "NodeJS frontend-less plotting lib using plotly.js inspired by matplotlib",
   "author": "Felix Lemke <[email protected]> (https://felixlemke.dev)",
   "license": "MIT",

libs/nodeplotlib/src/index.ts

@@ -1,5 +1,5 @@
 // Exports required for the actual nodeplotlib
-export { Plot, Layout } from './lib/interfaces/plot';
+export { Plot, Layout, Config } from './lib/interfaces/plot';
 export { plot } from './lib/nodeplotlib';
 
 // Exports required for the web app

libs/nodeplotlib/src/lib/interfaces/plot.ts

@@ -1,17 +1,24 @@
-import { Layout as PlotlyLayout, PlotData as PlotlyPlotData } from 'plotly.js';
+import {
+  Layout as PlotlyLayout,
+  PlotData as PlotlyPlotData,
+  Config as PlotlyConfig,
+} from 'plotly.js';
 import { Observable } from 'rxjs';
 
 export type Plot = Partial<PlotlyPlotData>;
 export type Layout = Partial<PlotlyLayout>;
+export type Config = Partial<PlotlyConfig>;
 
 export interface PlotDataStream {
   id: number;
   data: Observable<Plot[]>;
   layout: Observable<Layout | undefined>;
+  config: Config | undefined;
 }
 
 export interface PlotData {
   id: number;
   data: Plot[];
   layout?: Layout;
+  config?: Config;
 }

libs/nodeplotlib/src/lib/nodeplotlib.ts

@@ -6,6 +6,7 @@ import { PlotsService } from './server/plots/plots.service';
 import { ServerModule } from './server/server.module';
 import { BridgeService } from './server/services/bridge.service';
 import { getPort } from './utils/get-port';
+import { Config } from './interfaces/plot';
 let app: INestApplication | null = null;
 let plotsService: PlotsService;
 let bridgeService: BridgeService;
@@ -26,15 +27,19 @@ const port = getPort();
  * @param layout
  * @param cb
  */
-export function plot(data: Plot[] | Observable<Plot[]>, layout?: Layout) {
+export function plot(
+  data: Plot[] | Observable<Plot[]>,
+  layout?: Layout,
+  config?: Config
+) {
   bootstrap(port);
   const bufferedPlots = plotsBuffer$.value;
 
   const streamData$: Observable<Plot[]> =
     data instanceof Observable ? data : of(data);
   plotsBuffer$.next([
     ...bufferedPlots,
-    { data: streamData$, layout: of(layout) },
+    { data: streamData$, layout: of(layout), config },
   ]);
 }
 

libs/nodeplotlib/src/lib/server/plots/plots.gateway.ts

@@ -30,7 +30,14 @@ export class PlotsGateway implements OnGatewayConnection, OnGatewayDisconnect {
             return combineLatest([
               plotDataStream.data,
               plotDataStream.layout,
-            ]).pipe(map(([data, layout]) => ({ id, data, layout })));
+            ]).pipe(
+              map(([data, layout]) => ({
+                id,
+                data,
+                layout,
+                config: plotDataStream.config,
+              }))
+            );
           })
         )
       ),

libs/nodeplotlib/src/lib/server/plots/plots.service.ts

@@ -22,6 +22,7 @@ export class PlotsService {
       id: this.currentPlotId++,
       data: plotData.data,
       layout: plotData.layout,
+      config: plotData.config,
     };
 
     this.plotEntities.set(plot.id, plot);

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "nodeplotlib",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "license": "MIT",
   "scripts": {
     "ng": "nx",