#608 #616

.gitignore

@@ -40,6 +40,10 @@ testem.log
 /typings
 *.old
 
+# mock data
+/stubs
+/src/stubs
+
 # System Files
 .DS_Store
 Thumbs.db

angular.json

@@ -469,6 +469,140 @@
         }
       }
     },
+    "@senzing/sdk-components-ng/examples/charts": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "inlineTemplate": true,
+          "inlineStyle": true,
+          "style": "scss",
+          "skipTests": true
+        },
+        "@schematics/angular:class": {
+          "skipTests": true
+        },
+        "@schematics/angular:directive": {
+          "skipTests": true
+        },
+        "@schematics/angular:guard": {
+          "skipTests": true
+        },
+        "@schematics/angular:interceptor": {
+          "skipTests": true
+        },
+        "@schematics/angular:module": {
+          "skipTests": true
+        },
+        "@schematics/angular:pipe": {
+          "skipTests": true
+        },
+        "@schematics/angular:service": {
+          "skipTests": true
+        }
+      },
+      "root": "examples/charts",
+      "sourceRoot": "examples/charts/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/charts",
+            "index": "examples/charts/src/index.html",
+            "main": "examples/charts/src/main.ts",
+            "polyfills": "examples/charts/src/polyfills.ts",
+            "tsConfig": "examples/charts/tsconfig.app.json",
+            "aot": true,
+            "allowedCommonJsDependencies": [
+              "core-js/modules/es.promise.js",
+              "core-js/modules/es.regexp.to-string.js",
+              "core-js/modules/es.array.reverse.js",
+              "core-js/modules/es.array.index-of.js",
+              "core-js/modules/es.string.includes.js",
+              "core-js/modules/es.string.trim.js",
+              "core-js/modules/es.string.split.js",
+              "core-js/modules/es.string.ends-with.js",
+              "core-js/modules/es.array.reduce.js",
+              "core-js/modules/web.dom-collections.iterator.js",
+              "core-js/modules/es.array.iterator.js",
+              "core-js/modules/es.string.starts-with.js",
+              "core-js/modules/es.string.replace.js",
+              "core-js/modules/es.string.match.js",
+              "raf"
+            ],
+            "assets": [
+              "examples/charts/src/favicon.ico",
+              "examples/charts/src/assets"
+            ],
+            "styles": [
+              "src/lib/scss/styles.scss",
+              "examples/charts/src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "examples/charts/src/environments/environment.ts",
+                  "with": "examples/charts/src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb",
+                  "maximumError": "10kb"
+                }
+              ]
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "@senzing/sdk-components-ng/examples/charts:build",
+            "port": 4300,
+            "proxyConfig": "proxy.conf.json"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "@senzing/sdk-components-ng/examples/charts:build:production"
+            },
+            "development": {
+              "browserTarget": "@senzing/sdk-components-ng/examples/charts:build:development"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "@senzing/sdk-components-ng/examples/charts:build"
+          }
+        }
+      }
+    },
     "@senzing/sdk-components-ng/examples/graph": {
       "projectType": "application",
       "schematics": {

examples/charts/.browserslistrc

@@ -0,0 +1,19 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 3 Electron major versions
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
+not IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line.
+not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

examples/charts/src/app/app.component.html

@@ -0,0 +1,12 @@
+
+  <sz-example-header
+    title="@senzing/sdk-components-ng/examples/charts"
+    description="An example Angular app showing usage of the sz-record-counts-donut component"></sz-example-header>
+<div class="cols">
+  <sz-record-counts-donut
+    ignore="test,search,watchlist"
+    [colors]="['#081fad', 'lightblue', '#434447', '#6b486b', '#a05d56', '#d0743c', '#ff8c00']"
+    orderBy="countdesc"
+    ></sz-record-counts-donut>
+  <sz-license></sz-license>
+</div>

examples/charts/src/app/app.component.scss

@@ -0,0 +1,27 @@
+
+  .graph-context-menu {
+    border: 1px solid #686868;
+  }
+
+  :host {
+    display: block;
+    width: 1200px;
+
+    sz-record-counts-donut {
+      height: 200px;
+    }
+    sz-license {
+      margin-left: 20px;
+      width: 98%;
+
+      padding: 0 20px 20px 20px;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  .cols {
+    display: flex;;
+    flex-direction: row;
+
+  }

examples/charts/src/app/app.component.ts

@@ -0,0 +1,15 @@
+import { Component, ViewContainerRef } from '@angular/core';
+import { Overlay, OverlayRef } from '@angular/cdk/overlay';
+import { Subscription} from 'rxjs';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+export class AppComponent {
+  sub: Subscription;
+  overlayRef: OverlayRef | null;
+
+  constructor( public overlay: Overlay, public viewContainerRef: ViewContainerRef ) {}
+}

examples/charts/src/app/app.module.ts

@@ -0,0 +1,44 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http';
+import { SenzingSdkModule, SzRestConfiguration  } from '@senzing/sdk-components-ng';
+import { AppComponent } from './app.component';
+import { SzExamplesHeader } from '../common/header.component';
+
+/**
+* Pull in api configuration(SzRestConfigurationParameters)
+* from: environments/environment
+*
+* @example
+* ng build -c production
+* ng serve -c docker
+*/
+import { apiConfig, environment } from './../environments/environment';
+
+/**
+ * create exportable config factory
+ * for AOT compilation.
+ *
+ * @export
+ */
+export function SzRestConfigurationFactory() {
+  return new SzRestConfiguration( (apiConfig ? apiConfig : undefined) );
+}
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    SzExamplesHeader
+  ],
+  imports: [
+    BrowserModule,
+    HttpClientModule,
+    FormsModule,
+    ReactiveFormsModule,
+    SenzingSdkModule.forRoot( SzRestConfigurationFactory )
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

examples/charts/src/common/header.component.html

@@ -0,0 +1,6 @@
+<div style="text-align:left; font-weight: bold; font-size: 1.5em">
+    {{title}}
+</div>
+<div style="text-align:left; text-decoration: italic; font-size: 0.8em; margin: 2px 0 10px 0;">
+   {{description}}
+</div>

examples/charts/src/common/header.component.ts

@@ -0,0 +1,15 @@
+import { Component, HostBinding, Input, ViewChild, Output, OnInit, OnDestroy, EventEmitter, ElementRef, ChangeDetectorRef } from '@angular/core';
+
+@Component({
+    selector: 'sz-example-header',
+    templateUrl: './header.component.html',
+    styleUrls: ['./header.component.scss']
+  })
+  export class SzExamplesHeader {
+    @Input() public title: string = '';
+    @Input() public description: string = '';
+
+    constructor() {
+
+    }
+  }

examples/charts/src/environments/environment.prod.ts

@@ -0,0 +1,11 @@
+import { SzRestConfigurationParameters } from '@senzing/sdk-components-ng';
+
+export const environment = {
+  production: true
+};
+
+// api configuration parameters
+export const apiConfig: SzRestConfigurationParameters = {
+  'basePath': '/api',
+  'withCredentials': true
+};

examples/charts/src/environments/environment.ts

@@ -0,0 +1,24 @@
+import { SzRestConfigurationParameters } from '@senzing/sdk-components-ng';
+
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false
+};
+
+// api configuration parameters
+export const apiConfig: SzRestConfigurationParameters = {
+  'basePath': '/api',
+  'withCredentials': true
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

examples/charts/src/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Charts</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet">
+  <link href="~/node_modules/@senzing/styles/styles.css" rel="stylesheet">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

examples/charts/src/main.ts

@@ -0,0 +1,12 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));