make an api stub for non-backend mode

Author: shoudaos

README.md

@@ -6,19 +6,24 @@ This project was generated with [Angular CLI](https://github.com/angular/angular
 
 ## Install dependencies
 
-Run `npm install`. **Important! Please use `npm` not `yarn`!**
+Run `yarn install`.
 
 ## Development server
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:3000/`. The app will automatically reload if you change any of the source files.
+Run `yarn start` for a dev server. Navigate to `http://localhost:3000/`. The app will automatically reload if you change any of the source files.
+
+### If you use app with backend support, please use
+```
+yarn run serve:backend
+```
 
 ## Code scaffolding
 
 Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
 
 ## Build
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
+Run `yarn build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
 
 ## Further help
 

angular.json

@@ -91,6 +91,14 @@
                   "with": "src/environments/environment.hmr.ts"
                 }
               ]
+            },
+            "backend": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.backend.ts"
+                }
+              ]
             }
           }
         },
@@ -107,6 +115,9 @@
             "hmr": {
               "hmr": true,
               "browserTarget": "Sing:build:hmr"
+            },
+            "backend": {
+              "browserTarget": "Sing:build:backend"
             }
           }
         },

package.json

@@ -6,6 +6,7 @@
     "install": "napa",
     "ng": "ng",
     "start": "ng serve",
+    "start:backend": "ng serve --configuration backend",
     "hmr": "ng serve --configuration hmr",
     "build": "ng build --prod",
     "test": "ng test",

src/app/app.config.ts

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import {environment} from '../environments/environment';
 
 declare let jQuery: any;
 
@@ -12,6 +13,8 @@ export class AppConfig {
     name: 'sing',
     title: 'Sing Dashboard App with Angular 8.0 support by Flatlogic',
     version: '4.0.0',
+    remote: 'https://flatlogic-node-backend.herokuapp.com',
+    isBackend: environment.backend,
     hostApi,
     portApi,
     baseURLApi,

src/app/pages/analytics/analytics.service.ts

@@ -1,5 +1,7 @@
 import {EventEmitter, Injectable} from '@angular/core';
 import {HttpClient} from '@angular/common/http';
+import {AppConfig} from '../../app.config';
+import mock from './mock';
 
 @Injectable()
 export class AnalyticsService {
@@ -10,15 +12,30 @@ export class AnalyticsService {
   _mainChart: any = [];
   _isReceiving: any = false;
 
+  config: any;
+
   onReceiveDataSuccess: EventEmitter<boolean> = new EventEmitter();
 
-  constructor(private http: HttpClient) {}
+  constructor(
+    private http: HttpClient,
+    appConfig: AppConfig
+  ) {
+    this.config = appConfig.getConfig();
+  }
 
   receiveDataRequest() {
     this.receivingData();
-    this.http.get('/analytics').subscribe(data => {
-      this.receiveDataSuccess(data);
-    });
+    if (!this.config.isBackend) {
+      new Promise((resolve) => {
+        resolve(mock.backendData);
+      }).then(data => {
+        this.receiveDataSuccess(data);
+      });
+    } else {
+      this.http.get('/analytics').subscribe(data => {
+        this.receiveDataSuccess(data);
+      });
+    }
   }
 
   receiveDataSuccess(payload) {

src/app/pages/analytics/mock.js

@@ -156,4 +156,125 @@ export default {
       status: 'Sent',
     },
   ],
+  backendData: {
+    visits: {
+      count: 4.332,
+      logins: 830,
+      sign_out_pct: 0.5,
+      rate_pct: 4.5
+    },
+    performance: {
+      sdk: {
+        this_period_pct: 60,
+        last_period_pct: 30,
+      },
+      integration: {
+        this_period_pct: 40,
+        last_period_pct: 55,
+      }
+    },
+    server: {
+      1: {
+        pct: 60,
+        temp: 37,
+        frequency: 3.3
+      },
+      2: {
+        pct: 54,
+        temp: 31,
+        frequency: 3.3
+      }
+    },
+    revenue: getRevenueData(),
+    mainChart: getMainChartData()
+  }
 };
+
+function getRevenueData() {
+  const data = [];
+  const seriesCount = 3;
+  const accessories = ['SMX', 'Direct', 'Networks'];
+
+  for (let i = 0; i < seriesCount; i += 1) {
+    data.push({
+      label: accessories[i],
+      data: Math.floor(Math.random() * 100) + 1,
+    });
+  }
+
+  return data;
+}
+
+function getMainChartData() {
+  function generateRandomPicks(minPoint, maxPoint, picksAmount, xMax) {
+    let x = 0;
+    let y = 0;
+    const result = [];
+    const xStep = 1;
+    const smoothness = 0.3;
+    const pointsPerPick = Math.ceil(xMax / ((picksAmount * 2) + 1) / 2);
+
+    const maxValues = [];
+    const minValues = [];
+
+    for (let i = 0; i < picksAmount; i += 1) {
+      const minResult = minPoint + Math.random();
+      const maxResult = maxPoint - Math.random();
+
+      minValues.push(minResult);
+      maxValues.push(maxResult);
+    }
+
+    let localMax = maxValues.shift(0);
+    let localMin = 0;
+    let yStep = parseFloat(((localMax - localMin) / pointsPerPick).toFixed(2));
+
+    for (let j = 0; j < Math.ceil(xMax); j += 1) {
+      result.push([x, y]);
+
+      if ((y + yStep >= localMax) || (y + yStep <= localMin)) {
+        y += yStep * smoothness;
+      } else if ((result[result.length - 1][1] === localMax) || (result[result.length - 1][1] === localMin)) {
+        y += yStep * smoothness;
+      } else {
+        y += yStep;
+      }
+
+      if (y > localMax) {
+        y = localMax;
+      } else if (y < localMin) {
+        y = localMin;
+      }
+
+      if (y === localMin) {
+        localMax = maxValues.shift(0) || localMax;
+
+        const share = (localMax - localMin) / localMax;
+        const p = share > 0.5 ? Math.round(pointsPerPick * 1.2) : Math.round(pointsPerPick * share);
+
+        yStep = parseFloat(((localMax - localMin) / p).toFixed(2));
+        yStep *= Math.abs(yStep);
+      }
+
+      if (y === localMax) {
+        localMin = minValues.shift(0) || localMin;
+
+        const share = (localMax - localMin) / localMax;
+        const p = share > 0.5 ? Math.round(pointsPerPick * 1.5) : Math.round(pointsPerPick * 0.5);
+
+        yStep = parseFloat(((localMax - localMin) / p).toFixed(2));
+        yStep *= -1;
+      }
+
+      x += xStep;
+    }
+
+    return result;
+  }
+
+  const d1 = generateRandomPicks(0.2, 3, 4, 90);
+  const d2 = generateRandomPicks(0.4, 3.8, 4, 90);
+  const d3 = generateRandomPicks(0.2, 4.2, 3, 90);
+
+  return [d1, d2, d3];
+}