feat: add interfaces library

Author: ngfelixl

.eslintrc.json

@@ -19,12 +19,15 @@
             ]
           }
         ]
-      }
+      },
+      "plugins": ["ngrx"],
+      "extends": []
     },
     {
       "files": ["*.ts", "*.tsx"],
       "extends": ["plugin:@nrwl/nx/typescript"],
-      "rules": {}
+      "rules": {},
+      "plugins": ["ngrx"]
     },
     {
       "files": ["*.js", "*.jsx"],

angular.json

@@ -1,6 +1,39 @@
 {
   "version": 1,
   "projects": {
+    "interfaces": {
+      "root": "libs/interfaces",
+      "sourceRoot": "libs/interfaces/src",
+      "projectType": "library",
+      "architect": {
+        "build": {
+          "builder": "@nrwl/node:package",
+          "outputs": ["{options.outputPath}"],
+          "options": {
+            "outputPath": "dist/libs/interfaces",
+            "tsConfig": "libs/interfaces/tsconfig.lib.json",
+            "packageJson": "libs/interfaces/package.json",
+            "main": "libs/interfaces/src/index.ts",
+            "assets": ["libs/interfaces/*.md"]
+          }
+        },
+        "lint": {
+          "builder": "@nrwl/linter:eslint",
+          "outputs": ["{options.outputFile}"],
+          "options": {
+            "lintFilePatterns": ["libs/interfaces/**/*.ts"]
+          }
+        },
+        "test": {
+          "builder": "@nrwl/jest:jest",
+          "outputs": ["coverage/libs/interfaces"],
+          "options": {
+            "jestConfig": "libs/interfaces/jest.config.js",
+            "passWithNoTests": true
+          }
+        }
+      }
+    },
     "nodeplotlib": {
       "root": "libs/nodeplotlib",
       "sourceRoot": "libs/nodeplotlib/src",

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

@@ -1,14 +1,16 @@
+import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './components/app/app.component';
+import { OverviewComponent } from './components/overview/overview.component';
 import { StackComponent } from './components/stack/stack.component';
 import { StacksComponent } from './components/stacks/stacks.component';
 import { TutorialComponent } from './components/tutorial/tutorial.component';
-import { MatButtonModule } from '@angular/material/button';
-import { OverviewComponent } from './components/overview/overview.component';
+import { PlotsService } from './services/plots.service';
 
 @NgModule({
   declarations: [
@@ -24,8 +26,9 @@ import { OverviewComponent } from './components/overview/overview.component';
     BrowserModule,
     MatButtonModule,
     MatToolbarModule,
+    HttpClientModule,
   ],
-  providers: [],
+  providers: [PlotsService],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

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

@@ -1,9 +1,14 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PlotsService } from '../../services/plots.service';
 
 @Component({
   selector: 'npl-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AppComponent {}
+export class AppComponent {
+  constructor(private plotsService: PlotsService) {
+    this.plotsService.loadPlots().subscribe();
+  }
+}

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

@@ -1,12 +1,14 @@
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
+import { DataTransferObject } from '@npl/interfaces';
+
 
 @Injectable()
 export class PlotsService {
   constructor(private http: HttpClient) {}
 
-  loadPlotsStack(id: number): Observable<any> {
-    return this.http.get(`http://localhost:{{port}}/data/${id}`);
+  loadPlots(): Observable<DataTransferObject> {
+    return this.http.get<DataTransferObject>(`/api/plots`);
   }
 }

apps/web/src/index.html

@@ -16,6 +16,11 @@
   <body class="mat-typography">
     <npl-root></npl-root>
     <!--<div id="container" data-plotid="{{plotid}}"></div>-->
-    <script type="text/javascript" src="https://cdn.plot.ly/plotly-1.58.4.min.js"></script>
+    <script
+      type="text/javascript"
+      src="https://cdn.plot.ly/plotly-1.58.4.min.js"
+      async
+      defer
+    ></script>
   </body>
 </html>

libs/interfaces/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": [["@nrwl/web/babel", { "useBuiltIns": "usage" }]]
+}

libs/interfaces/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

libs/interfaces/README.md

@@ -0,0 +1,7 @@
+# interfaces
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test interfaces` to execute the unit tests via [Jest](https://jestjs.io).

libs/interfaces/jest.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  displayName: 'interfaces',
+  preset: '../../jest.preset.js',
+  globals: {
+    'ts-jest': {
+      tsconfig: '<rootDir>/tsconfig.spec.json',
+    },
+  },
+  testEnvironment: 'node',
+  transform: {
+    '^.+\\.[tj]sx?$': 'ts-jest',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../coverage/libs/interfaces',
+};