├── .editorconfig
├── .gitignore
├── README.md
├── angular.json
├── browserslist
├── e2e
    ├── protractor.conf.js
    ├── src
    │   ├── app.e2e-spec.ts
    │   └── app.po.ts
    └── tsconfig.json
├── karma.conf.js
├── package-lock.json
├── package.json
├── src
    ├── app
    │   ├── app-routing.module.ts
    │   ├── app.component.html
    │   ├── app.component.orig.html
    │   ├── app.component.scss
    │   ├── app.component.spec.ts
    │   ├── app.component.ts
    │   ├── app.module.ts
    │   ├── area-chart
    │   │   ├── area-chart.component.html
    │   │   ├── area-chart.component.scss
    │   │   ├── area-chart.component.spec.ts
    │   │   └── area-chart.component.ts
    │   ├── chart-controls.service.spec.ts
    │   ├── chart-controls.service.ts
    │   ├── donut-chart
    │   │   ├── donut-chart.component.html
    │   │   ├── donut-chart.component.scss
    │   │   ├── donut-chart.component.spec.ts
    │   │   └── donut-chart.component.ts
    │   ├── fm
    │   │   ├── flash-mob.component.html
    │   │   ├── flash-mob.component.scss
    │   │   ├── flash-mob.component.spec.ts
    │   │   └── flash-mob.component.ts
    │   ├── order-delivery
    │   │   ├── order-delivery.component.html
    │   │   ├── order-delivery.component.scss
    │   │   ├── order-delivery.component.spec.ts
    │   │   └── order-delivery.component.ts
    │   └── order-status
    │   │   ├── hobbiton.json
    │   │   ├── order-status.component.html
    │   │   ├── order-status.component.scss
    │   │   ├── order-status.component.spec.ts
    │   │   └── order-status.component.ts
    ├── assets
    │   ├── .gitkeep
    │   └── pizza.png
    ├── environments
    │   ├── environment.prod.ts
    │   └── environment.ts
    ├── favicon.ico
    ├── index.html
    ├── main.ts
    ├── polyfills.ts
    ├── styles.scss
    └── test.ts
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.spec.json
└── tslint.json


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see https://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # compiled output
 4 | /dist
 5 | /tmp
 6 | /out-tsc
 7 | # Only exists if Bazel was run
 8 | /bazel-out
 9 | 
10 | # dependencies
11 | /node_modules
12 | 
13 | # profiling files
14 | chrome-profiler-events*.json
15 | speed-measure-plugin*.json
16 | 
17 | # IDEs and editors
18 | /.idea
19 | .project
20 | .classpath
21 | .c9/
22 | *.launch
23 | .settings/
24 | *.sublime-workspace
25 | 
26 | # IDE - VSCode
27 | .vscode/*
28 | !.vscode/settings.json
29 | !.vscode/tasks.json
30 | !.vscode/launch.json
31 | !.vscode/extensions.json
32 | .history/*
33 | 
34 | # misc
35 | /.sass-cache
36 | /connect.lock
37 | /coverage
38 | /libpeerconnection.log
39 | npm-debug.log
40 | yarn-error.log
41 | testem.log
42 | /typings
43 | 
44 | # System Files
45 | .DS_Store
46 | Thumbs.db
47 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Building Reactive Charts in Angular 8 using D3
 2 | 
 3 | This projects shows how to build reactive charts inside an Angular 8 application using the D3 JavaScript framework.
 4 | 
 5 | Click [here](https://mpdroid.github.io/d3-in-angular/) to view the demo app.
 6 | 
 7 | Click [here](https://medium.com/@marvinpdroid/reactive-charts-in-angular-8-using-d3-4550bb0b4255)  to read the full article that describes some of the motivations behind the code. 
 8 | 
 9 | ## Main Dependencies
10 | 
11 | - Angular 8.2.9
12 | 
13 | - D3 5.12.0
14 | 
15 | 
16 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.3.8.
17 | 
18 | 


--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3 |   "version": 1,
  4 |   "newProjectRoot": "projects",
  5 |   "projects": {
  6 |     "d3-in-angular": {
  7 |       "projectType": "application",
  8 |       "schematics": {
  9 |         "@schematics/angular:component": {
 10 |           "style": "scss"
 11 |         }
 12 |       },
 13 |       "root": "",
 14 |       "sourceRoot": "src",
 15 |       "prefix": "app",
 16 |       "architect": {
 17 |         "build": {
 18 |           "builder": "@angular-devkit/build-angular:browser",
 19 |           "options": {
 20 |             "outputPath": "dist/d3-in-angular",
 21 |             "index": "src/index.html",
 22 |             "main": "src/main.ts",
 23 |             "polyfills": "src/polyfills.ts",
 24 |             "tsConfig": "tsconfig.app.json",
 25 |             "aot": false,
 26 |             "assets": [
 27 |               "src/favicon.ico",
 28 |               "src/assets"
 29 |             ],
 30 |             "styles": [
 31 |               "src/styles.scss"
 32 |             ],
 33 |             "scripts": []
 34 |           },
 35 |           "configurations": {
 36 |             "production": {
 37 |               "fileReplacements": [
 38 |                 {
 39 |                   "replace": "src/environments/environment.ts",
 40 |                   "with": "src/environments/environment.prod.ts"
 41 |                 }
 42 |               ],
 43 |               "optimization": true,
 44 |               "outputHashing": "all",
 45 |               "sourceMap": false,
 46 |               "extractCss": true,
 47 |               "namedChunks": false,
 48 |               "aot": true,
 49 |               "extractLicenses": true,
 50 |               "vendorChunk": false,
 51 |               "buildOptimizer": true,
 52 |               "budgets": [
 53 |                 {
 54 |                   "type": "initial",
 55 |                   "maximumWarning": "2mb",
 56 |                   "maximumError": "5mb"
 57 |                 },
 58 |                 {
 59 |                   "type": "anyComponentStyle",
 60 |                   "maximumWarning": "6kb",
 61 |                   "maximumError": "10kb"
 62 |                 }
 63 |               ]
 64 |             }
 65 |           }
 66 |         },
 67 |         "serve": {
 68 |           "builder": "@angular-devkit/build-angular:dev-server",
 69 |           "options": {
 70 |             "browserTarget": "d3-in-angular:build"
 71 |           },
 72 |           "configurations": {
 73 |             "production": {
 74 |               "browserTarget": "d3-in-angular:build:production"
 75 |             }
 76 |           }
 77 |         },
 78 |         "extract-i18n": {
 79 |           "builder": "@angular-devkit/build-angular:extract-i18n",
 80 |           "options": {
 81 |             "browserTarget": "d3-in-angular:build"
 82 |           }
 83 |         },
 84 |         "test": {
 85 |           "builder": "@angular-devkit/build-angular:karma",
 86 |           "options": {
 87 |             "main": "src/test.ts",
 88 |             "polyfills": "src/polyfills.ts",
 89 |             "tsConfig": "tsconfig.spec.json",
 90 |             "karmaConfig": "karma.conf.js",
 91 |             "assets": [
 92 |               "src/favicon.ico",
 93 |               "src/assets"
 94 |             ],
 95 |             "styles": [
 96 |               "src/styles.scss"
 97 |             ],
 98 |             "scripts": []
 99 |           }
100 |         },
101 |         "lint": {
102 |           "builder": "@angular-devkit/build-angular:tslint",
103 |           "options": {
104 |             "tsConfig": [
105 |               "tsconfig.app.json",
106 |               "tsconfig.spec.json",
107 |               "e2e/tsconfig.json"
108 |             ],
109 |             "exclude": [
110 |               "**/node_modules/**"
111 |             ]
112 |           }
113 |         },
114 |         "e2e": {
115 |           "builder": "@angular-devkit/build-angular:protractor",
116 |           "options": {
117 |             "protractorConfig": "e2e/protractor.conf.js",
118 |             "devServerTarget": "d3-in-angular:serve"
119 |           },
120 |           "configurations": {
121 |             "production": {
122 |               "devServerTarget": "d3-in-angular:serve:production"
123 |             }
124 |           }
125 |         }
126 |       }
127 |     }},
128 |   "defaultProject": "d3-in-angular"
129 | }


--------------------------------------------------------------------------------
/browserslist:
--------------------------------------------------------------------------------
 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
 2 | # For additional information regarding the format and rule options, please see:
 3 | # https://github.com/browserslist/browserslist#queries
 4 | 
 5 | # You can see what browsers were selected by your queries by running:
 6 | #   npx browserslist
 7 | 
 8 | > 0.5%
 9 | last 2 versions
10 | Firefox ESR
11 | not dead
12 | not IE 9-11 # For IE 9-11 support, remove 'not'.


--------------------------------------------------------------------------------
/e2e/protractor.conf.js:
--------------------------------------------------------------------------------
 1 | // @ts-check
 2 | // Protractor configuration file, see link for more information
 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts
 4 | 
 5 | const { SpecReporter } = require('jasmine-spec-reporter');
 6 | 
 7 | /**
 8 |  * @type { import("protractor").Config }
 9 |  */
10 | exports.config = {
11 |   allScriptsTimeout: 11000,
12 |   specs: [
13 |     './src/**/*.e2e-spec.ts'
14 |   ],
15 |   capabilities: {
16 |     'browserName': 'chrome'
17 |   },
18 |   directConnect: true,
19 |   baseUrl: 'http://localhost:4200/',
20 |   framework: 'jasmine',
21 |   jasmineNodeOpts: {
22 |     showColors: true,
23 |     defaultTimeoutInterval: 30000,
24 |     print: function() {}
25 |   },
26 |   onPrepare() {
27 |     require('ts-node').register({
28 |       project: require('path').join(__dirname, './tsconfig.json')
29 |     });
30 |     jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
31 |   }
32 | };


--------------------------------------------------------------------------------
/e2e/src/app.e2e-spec.ts:
--------------------------------------------------------------------------------
 1 | import { AppPage } from './app.po';
 2 | import { browser, logging } from 'protractor';
 3 | 
 4 | describe('workspace-project App', () => {
 5 |   let page: AppPage;
 6 | 
 7 |   beforeEach(() => {
 8 |     page = new AppPage();
 9 |   });
10 | 
11 |   it('should display welcome message', () => {
12 |     page.navigateTo();
13 |     expect(page.getTitleText()).toEqual('d3-in-angular app is running!');
14 |   });
15 | 
16 |   afterEach(async () => {
17 |     // Assert that there are no errors emitted from the browser
18 |     const logs = await browser.manage().logs().get(logging.Type.BROWSER);
19 |     expect(logs).not.toContain(jasmine.objectContaining({
20 |       level: logging.Level.SEVERE,
21 |     } as logging.Entry));
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/e2e/src/app.po.ts:
--------------------------------------------------------------------------------
 1 | import { browser, by, element } from 'protractor';
 2 | 
 3 | export class AppPage {
 4 |   navigateTo() {
 5 |     return browser.get(browser.baseUrl) as Promise<any>;
 6 |   }
 7 | 
 8 |   getTitleText() {
 9 |     return element(by.css('app-root .content span')).getText() as Promise<string>;
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/e2e/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/e2e",
 5 |     "module": "commonjs",
 6 |     "target": "es5",
 7 |     "types": [
 8 |       "jasmine",
 9 |       "jasminewd2",
10 |       "node"
11 |     ]
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration file, see link for more information
 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
 3 | 
 4 | module.exports = function (config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     frameworks: ['jasmine', '@angular-devkit/build-angular'],
 8 |     plugins: [
 9 |       require('karma-jasmine'),
10 |       require('karma-chrome-launcher'),
11 |       require('karma-jasmine-html-reporter'),
12 |       require('karma-coverage-istanbul-reporter'),
13 |       require('@angular-devkit/build-angular/plugins/karma')
14 |     ],
15 |     client: {
16 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
17 |     },
18 |     coverageIstanbulReporter: {
19 |       dir: require('path').join(__dirname, './coverage/d3-in-angular'),
20 |       reports: ['html', 'lcovonly', 'text-summary'],
21 |       fixWebpackSourcePaths: true
22 |     },
23 |     reporters: ['progress', 'kjhtml'],
24 |     port: 9876,
25 |     colors: true,
26 |     logLevel: config.LOG_INFO,
27 |     autoWatch: true,
28 |     browsers: ['Chrome'],
29 |     singleRun: false,
30 |     restartOnFileChange: true
31 |   });
32 | };
33 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "d3-in-angular",
 3 |   "version": "0.0.0",
 4 |   "scripts": {
 5 |     "ng": "ng",
 6 |     "start": "ng serve",
 7 |     "build": "ng build",
 8 |     "test": "ng test",
 9 |     "lint": "ng lint",
10 |     "e2e": "ng e2e"
11 |   },
12 |   "private": true,
13 |   "dependencies": {
14 |     "@angular/animations": "~8.2.9",
15 |     "@angular/cdk": "~8.2.2",
16 |     "@angular/common": "~8.2.9",
17 |     "@angular/compiler": "~8.2.9",
18 |     "@angular/core": "~8.2.9",
19 |     "@angular/forms": "~8.2.9",
20 |     "@angular/material": "^8.2.2",
21 |     "@angular/platform-browser": "~8.2.9",
22 |     "@angular/platform-browser-dynamic": "~8.2.9",
23 |     "@angular/router": "~8.2.9",
24 |     "@types/webaudioapi": "0.0.27",
25 |     "d3": "^5.12.0",
26 |     "hammerjs": "^2.0.8",
27 |     "rxjs": "~6.4.0",
28 |     "tslib": "^1.10.0",
29 |     "zone.js": "~0.9.1"
30 |   },
31 |   "devDependencies": {
32 |     "@angular-devkit/build-angular": "~0.803.8",
33 |     "@angular/cli": "~8.3.8",
34 |     "@angular/compiler-cli": "~8.2.9",
35 |     "@angular/language-service": "~8.2.9",
36 |     "@types/d3": "^5.7.2",
37 |     "@types/jasmine": "~3.3.8",
38 |     "@types/jasminewd2": "~2.0.3",
39 |     "@types/node": "~8.9.4",
40 |     "codelyzer": "^5.0.0",
41 |     "jasmine-core": "~3.4.0",
42 |     "jasmine-spec-reporter": "~4.2.1",
43 |     "karma": "~4.1.0",
44 |     "karma-chrome-launcher": "~2.2.0",
45 |     "karma-coverage-istanbul-reporter": "~2.0.1",
46 |     "karma-jasmine": "~2.0.1",
47 |     "karma-jasmine-html-reporter": "^1.4.0",
48 |     "protractor": "~5.4.0",
49 |     "ts-node": "~7.0.0",
50 |     "tslint": "~5.15.0",
51 |     "typescript": "~3.5.3"
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { Routes, RouterModule } from '@angular/router';
 3 | import { OrderStatusComponent } from './order-status/order-status.component';
 4 | import { OrderDeliveryComponent } from './order-delivery/order-delivery.component';
 5 | import { FlashMobComponent } from './fm/flash-mob.component';
 6 | 
 7 | 
 8 | const routes: Routes = [
 9 |     { path: 'status', component: OrderStatusComponent },
10 |     { path: 'delivery', component: OrderDeliveryComponent },
11 |     { path: 'flashmob', component: FlashMobComponent },
12 |     { path: '', component: OrderStatusComponent }
13 | ];
14 | 
15 | @NgModule({
16 |   imports: [RouterModule.forRoot(routes)],
17 |   exports: [RouterModule]
18 | })
19 | export class AppRoutingModule { }
20 | 


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 | <div *ngIf="!chartControlsService.fullScreen" class="toolbar" role="banner">
2 |     <span>Papa Jon's Pizza Pies</span>
3 | </div>
4 | <img *ngIf="!chartControlsService.fullScreen" class="watermark" src="assets/pizza.png"/>
5 | <button *ngIf="!chartControlsService.fullScreen" mat-icon-button id="mike" color="accent" (click)="toggleSpeechRecognition()">
6 |     <mat-icon>mic</mat-icon>
7 | </button>
8 | <router-outlet></router-outlet>
9 | 


--------------------------------------------------------------------------------
/src/app/app.component.orig.html:
--------------------------------------------------------------------------------
   1 | <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
   2 | <!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
   3 | <!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
   4 | <!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
   5 | <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
   6 | <!-- * * * * * * * * * Delete the template below * * * * * * * * * * -->
   7 | <!-- * * * * * * * to get started with your project! * * * * * * * * -->
   8 | <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
   9 | 
  10 | <style>
  11 |   :host {
  12 |     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  13 |     font-size: 14px;
  14 |     color: #333;
  15 |     box-sizing: border-box;
  16 |     -webkit-font-smoothing: antialiased;
  17 |     -moz-osx-font-smoothing: grayscale;
  18 |   }
  19 | 
  20 |   h1,
  21 |   h2,
  22 |   h3,
  23 |   h4,
  24 |   h5,
  25 |   h6 {
  26 |     margin: 8px 0;
  27 |   }
  28 | 
  29 |   p {
  30 |     margin: 0;
  31 |   }
  32 | 
  33 |   .spacer {
  34 |     flex: 1;
  35 |   }
  36 | 
  37 |   .toolbar {
  38 |     height: 60px;
  39 |     margin: -8px;
  40 |     display: flex;
  41 |     align-items: center;
  42 |     background-color: #1976d2;
  43 |     color: white;
  44 |     font-weight: 600;
  45 |   }
  46 | 
  47 |   .toolbar img {
  48 |     margin: 0 16px;
  49 |   }
  50 | 
  51 |   .toolbar #twitter-logo {
  52 |     height: 40px;
  53 |     margin: 0 16px;
  54 |   }
  55 | 
  56 |   .toolbar #twitter-logo:hover {
  57 |     opacity: 0.8;
  58 |   }
  59 | 
  60 |   .content {
  61 |     display: flex;
  62 |     margin: 32px auto;
  63 |     padding: 0 16px;
  64 |     max-width: 960px;
  65 |     flex-direction: column;
  66 |     align-items: center;
  67 |   }
  68 | 
  69 |   svg.material-icons {
  70 |     height: 24px;
  71 |     width: auto;
  72 |   }
  73 | 
  74 |   svg.material-icons:not(:last-child) {
  75 |     margin-right: 8px;
  76 |   }
  77 | 
  78 |   .card svg.material-icons path {
  79 |     fill: #888;
  80 |   }
  81 | 
  82 |   .card-container {
  83 |     display: flex;
  84 |     flex-wrap: wrap;
  85 |     justify-content: center;
  86 |     margin-top: 16px;
  87 |   }
  88 | 
  89 |   .card {
  90 |     border-radius: 4px;
  91 |     border: 1px solid #eee;
  92 |     background-color: #fafafa;
  93 |     height: 40px;
  94 |     width: 200px;
  95 |     margin: 0 8px 16px;
  96 |     padding: 16px;
  97 |     display: flex;
  98 |     flex-direction: row;
  99 |     justify-content: center;
 100 |     align-items: center;
 101 |     transition: all 0.2s ease-in-out;
 102 |     line-height: 24px;
 103 |   }
 104 | 
 105 |   .card-container .card:not(:last-child) {
 106 |     margin-right: 0;
 107 |   }
 108 | 
 109 |   .card.card-small {
 110 |     height: 16px;
 111 |     width: 168px;
 112 |   }
 113 | 
 114 |   .card-container .card:not(.highlight-card) {
 115 |     cursor: pointer;
 116 |   }
 117 | 
 118 |   .card-container .card:not(.highlight-card):hover {
 119 |     transform: translateY(-3px);
 120 |     box-shadow: 0 4px 17px rgba(black, 0.35);
 121 |   }
 122 | 
 123 |   .card-container .card:not(.highlight-card):hover .material-icons path {
 124 |     fill: rgb(105, 103, 103);
 125 |   }
 126 | 
 127 |   .card.highlight-card {
 128 |     background-color: #1976d2;
 129 |     color: white;
 130 |     font-weight: 600;
 131 |     border: none;
 132 |     width: auto;
 133 |     min-width: 30%;
 134 |     position: relative;
 135 |   }
 136 | 
 137 |   .card.card.highlight-card span {
 138 |     margin-left: 60px;
 139 |   }
 140 | 
 141 |   svg#rocket {
 142 |     width: 80px;
 143 |     position: absolute;
 144 |     left: -10px;
 145 |     top: -24px;
 146 |   }
 147 | 
 148 |   svg#rocket-smoke {
 149 |     height: 100vh;
 150 |     position: absolute;
 151 |     top: 10px;
 152 |     right: 180px;
 153 |     z-index: -10;
 154 |   }
 155 | 
 156 |   a,
 157 |   a:visited,
 158 |   a:hover {
 159 |     color: #1976d2;
 160 |     text-decoration: none;
 161 |   }
 162 | 
 163 |   a:hover {
 164 |     color: #125699;
 165 |   }
 166 | 
 167 |   .terminal {
 168 |     position: relative;
 169 |     width: 80%;
 170 |     max-width: 600px;
 171 |     border-radius: 6px;
 172 |     padding-top: 45px;
 173 |     margin-top: 8px;
 174 |     overflow: hidden;
 175 |     background-color: rgb(15, 15, 16);
 176 |   }
 177 | 
 178 |   .terminal::before {
 179 |     content: "\2022 \2022 \2022";
 180 |     position: absolute;
 181 |     top: 0;
 182 |     left: 0;
 183 |     height: 4px;
 184 |     background: rgb(58, 58, 58);
 185 |     color: #c2c3c4;
 186 |     width: 100%;
 187 |     font-size: 2rem;
 188 |     line-height: 0;
 189 |     padding: 14px 0;
 190 |     text-indent: 4px;
 191 |   }
 192 | 
 193 |   .terminal pre {
 194 |     font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
 195 |     color: white;
 196 |     padding: 0 1rem 1rem;
 197 |     margin: 0;
 198 |   }
 199 | 
 200 |   .circle-link {
 201 |     height: 40px;
 202 |     width: 40px;
 203 |     border-radius: 40px;
 204 |     margin: 8px;
 205 |     background-color: white;
 206 |     border: 1px solid #eeeeee;
 207 |     display: flex;
 208 |     justify-content: center;
 209 |     align-items: center;
 210 |     cursor: pointer;
 211 |     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
 212 |     transition: 1s ease-out;
 213 |   }
 214 | 
 215 |   .circle-link:hover {
 216 |     transform: translateY(-0.25rem);
 217 |     box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
 218 |   }
 219 | 
 220 |   footer {
 221 |     margin-top: 8px;
 222 |     display: flex;
 223 |     align-items: center;
 224 |     line-height: 20px;
 225 |   }
 226 | 
 227 |   footer a {
 228 |     display: flex;
 229 |     align-items: center;
 230 |   }
 231 | 
 232 |   .github-star-badge {
 233 |     color: #24292e;
 234 |     display: flex;
 235 |     align-items: center;
 236 |     font-size: 12px;
 237 |     padding: 3px 10px;
 238 |     border: 1px solid rgba(27,31,35,.2);
 239 |     border-radius: 3px;
 240 |     background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
 241 |     margin-left: 4px;
 242 |     font-weight: 600;
 243 |     font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
 244 |   }
 245 | 
 246 |   .github-star-badge:hover {
 247 |     background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
 248 |     border-color: rgba(27,31,35,.35);
 249 |     background-position: -.5em;
 250 |   }
 251 | 
 252 |   .github-star-badge .material-icons {
 253 |     height: 16px;
 254 |     width: 16px;
 255 |     margin-right: 4px;
 256 |   }
 257 | 
 258 |   svg#clouds {
 259 |     position: fixed;
 260 |     bottom: -160px;
 261 |     left: -230px;
 262 |     z-index: -10;
 263 |     width: 1920px;
 264 |   }
 265 | 
 266 | 
 267 |   /* Responsive Styles */
 268 |   @media screen and (max-width: 767px) {
 269 | 
 270 |     .card-container > *:not(.circle-link) ,
 271 |     .terminal {
 272 |       width: 100%;
 273 |     }
 274 | 
 275 |     .card:not(.highlight-card) {
 276 |       height: 16px;
 277 |       margin: 8px 0;
 278 |     }
 279 | 
 280 |     .card.highlight-card span {
 281 |       margin-left: 72px;
 282 |     }
 283 | 
 284 |     svg#rocket-smoke {
 285 |       right: 120px;
 286 |       transform: rotate(-5deg);
 287 |     }
 288 |   }
 289 | 
 290 |   @media screen and (max-width: 575px) {
 291 |     svg#rocket-smoke {
 292 |       display: none;
 293 |       visibility: hidden;
 294 |     }
 295 |   }
 296 | 
 297 | 
 298 | 
 299 | 
 300 | 
 301 | 
 302 | 
 303 | 
 304 | 
 305 | 
 306 | 
 307 | 
 308 | 
 309 | 
 310 | 
 311 | 
 312 | 
 313 | 
 314 | 
 315 | 
 316 | 
 317 | 
 318 | 
 319 | 
 320 | 
 321 | 
 322 | 
 323 | 
 324 | 
 325 | 
 326 | 
 327 | 
 328 | 
 329 | 
 330 | 
 331 | 
 332 | 
 333 | 
 334 | 
 335 | 
 336 | 
 337 | 
 338 | 
 339 | 
 340 | 
 341 | 
 342 | 
 343 | 
 344 | 
 345 | 
 346 | 
 347 | 
 348 | 
 349 | 
 350 | 
 351 | 
 352 | 
 353 | 
 354 | 
 355 | 
 356 | 
 357 | 
 358 | 
 359 | 
 360 | 
 361 | 
 362 | 
 363 | 
 364 | 
 365 | 
 366 | 
 367 | 
 368 | 
 369 | 
 370 | 
 371 | 
 372 | 
 373 | 
 374 | 
 375 | 
 376 | 
 377 | 
 378 | 
 379 | 
 380 | 
 381 | 
 382 | 
 383 | 
 384 | 
 385 | 
 386 | 
 387 | 
 388 | 
 389 | 
 390 | 
 391 | 
 392 | 
 393 | 
 394 | 
 395 | 
 396 | 
 397 | 
 398 | 
 399 | 
 400 | 
 401 | 
 402 | 
 403 | 
 404 | 
 405 | 
 406 | 
 407 | 
 408 | 
 409 | 
 410 | 
 411 | 
 412 | 
 413 | 
 414 | 
 415 | 
 416 | 
 417 | 
 418 | 
 419 | 
 420 | 
 421 | 
 422 | 
 423 | 
 424 | 
 425 | 
 426 | 
 427 | 
 428 | 
 429 | 
 430 | 
 431 | 
 432 | 
 433 | 
 434 | 
 435 | 
 436 | 
 437 | 
 438 | 
 439 | 
 440 | 
 441 | 
 442 | 
 443 | 
 444 | 
 445 | 
 446 | 
 447 | 
 448 | 
 449 | 
 450 | 
 451 | 
 452 | 
 453 | 
 454 | 
 455 | 
 456 | 
 457 | 
 458 | 
 459 | 
 460 | 
 461 | 
 462 | 
 463 | 
 464 | 
 465 | 
 466 | 
 467 | 
 468 | 
 469 | 
 470 | 
 471 | 
 472 | 
 473 | 
 474 | 
 475 | 
 476 | 
 477 | 
 478 | 
 479 | 
 480 | 
 481 | 
 482 | 
 483 | 
 484 | 
 485 | 
 486 | 
 487 | 
 488 | 
 489 | 
 490 | 
 491 | 
 492 | 
 493 | 
 494 | 
 495 | 
 496 | 
 497 | 
 498 | 
 499 | 
 500 | 
 501 | 
 502 | 
 503 | 
 504 | 
 505 | 
 506 | 
 507 | 
 508 | 
 509 | 
 510 | 
 511 | 
 512 | 
 513 | 
 514 | 
 515 | 
 516 | 
 517 | 
 518 | 
 519 | 
 520 | 
 521 | 
 522 | 
 523 | 
 524 | 
 525 | 
 526 | 
 527 | 
 528 | 
 529 | 
 530 | 
 531 | 
 532 | 
 533 | 
 534 | 
 535 | 
 536 | 
 537 | 
 538 | 
 539 | 
 540 | 
 541 | 
 542 | 
 543 | 
 544 | 
 545 | 
 546 | 
 547 | 
 548 | 
 549 | 
 550 | 
 551 | 
 552 | 
 553 | 
 554 | 
 555 | 
 556 | 
 557 | 
 558 | 
 559 | 
 560 | 
 561 | 
 562 | 
 563 | 
 564 | 
 565 | 
 566 | 
 567 | 
 568 | 
 569 | 
 570 | 
 571 | 
 572 | 
 573 | 
 574 | 
 575 | 
 576 | 
 577 | 
 578 | 
 579 | 
 580 | 
 581 | 
 582 | 
 583 | 
 584 | 
 585 | 
 586 | 
 587 | 
 588 | 
 589 | 
 590 | 
 591 | 
 592 | 
 593 | 
 594 | 
 595 | 
 596 | 
 597 | 
 598 | 
 599 | 
 600 | 
 601 | 
 602 | 
 603 | 
 604 | 
 605 | 
 606 | 
 607 | 
 608 | 
 609 | 
 610 | 
 611 | 
 612 | 
 613 | 
 614 | 
 615 | 
 616 | 
 617 | 
 618 | 
 619 | 
 620 | 
 621 | 
 622 | 
 623 | 
 624 | 
 625 | 
 626 | 
 627 | 
 628 | 
 629 | 
 630 | 
 631 | 
 632 | 
 633 | 
 634 | 
 635 | 
 636 | 
 637 | 
 638 | 
 639 | 
 640 | 
 641 | 
 642 | 
 643 | 
 644 | 
 645 | 
 646 | 
 647 | 
 648 | 
 649 | 
 650 | 
 651 | 
 652 | 
 653 | 
 654 | 
 655 | 
 656 | 
 657 | 
 658 | 
 659 | 
 660 | 
 661 | 
 662 | 
 663 | 
 664 | 
 665 | 
 666 | 
 667 | 
 668 | 
 669 | 
 670 | 
 671 | 
 672 | 
 673 | 
 674 | 
 675 | 
 676 | 
 677 | 
 678 | 
 679 | 
 680 | 
 681 | 
 682 | 
 683 | 
 684 | 
 685 | 
 686 | 
 687 | 
 688 | 
 689 | 
 690 | 
 691 | 
 692 | 
 693 | 
 694 | 
 695 | 
 696 | 
 697 | 
 698 | 
 699 | 
 700 | 
 701 | 
 702 | 
 703 | 
 704 | 
 705 | 
 706 | 
 707 | 
 708 | 
 709 | 
 710 | 
 711 | 
 712 | 
 713 | 
 714 | 
 715 | 
 716 | 
 717 | 
 718 | 
 719 | 
 720 | 
 721 | 
 722 | 
 723 | 
 724 | 
 725 | 
 726 | 
 727 | 
 728 | 
 729 | 
 730 | 
 731 | 
 732 | 
 733 | 
 734 | 
 735 | 
 736 | 
 737 | 
 738 | 
 739 | 
 740 | 
 741 | 
 742 | 
 743 | 
 744 | 
 745 | 
 746 | 
 747 | 
 748 | 
 749 | 
 750 | 
 751 | 
 752 | 
 753 | 
 754 | 
 755 | 
 756 | 
 757 | 
 758 | 
 759 | 
 760 | 
 761 | 
 762 | 
 763 | 
 764 | 
 765 | 
 766 | 
 767 | 
 768 | 
 769 | 
 770 | 
 771 | 
 772 | 
 773 | 
 774 | 
 775 | 
 776 | 
 777 | 
 778 | 
 779 | 
 780 | 
 781 | 
 782 | 
 783 | 
 784 | 
 785 | 
 786 | 
 787 | 
 788 | 
 789 | 
 790 | 
 791 | 
 792 | 
 793 | 
 794 | 
 795 | 
 796 | 
 797 | 
 798 | 
 799 | 
 800 | 
 801 | 
 802 | 
 803 | 
 804 | 
 805 | 
 806 | 
 807 | 
 808 | 
 809 | 
 810 | 
 811 | 
 812 | 
 813 | 
 814 | 
 815 | 
 816 | 
 817 | 
 818 | 
 819 | 
 820 | 
 821 | 
 822 | 
 823 | 
 824 | 
 825 | 
 826 | 
 827 | 
 828 | 
 829 | 
 830 | 
 831 | 
 832 | 
 833 | 
 834 | 
 835 | 
 836 | 
 837 | 
 838 | 
 839 | 
 840 | 
 841 | 
 842 | 
 843 | 
 844 | 
 845 | 
 846 | 
 847 | 
 848 | 
 849 | 
 850 | 
 851 | 
 852 | 
 853 | 
 854 | 
 855 | 
 856 | 
 857 | 
 858 | 
 859 | 
 860 | 
 861 | 
 862 | 
 863 | 
 864 | 
 865 | 
 866 | 
 867 | 
 868 | 
 869 | 
 870 | 
 871 | 
 872 | 
 873 | 
 874 | 
 875 | 
 876 | 
 877 | 
 878 | 
 879 | 
 880 | 
 881 | 
 882 | 
 883 | 
 884 | 
 885 | 
 886 | 
 887 | 
 888 | 
 889 | 
 890 | 
 891 | 
 892 | 
 893 | 
 894 | 
 895 | 
 896 | 
 897 | 
 898 | 
 899 | 
 900 | 
 901 | 
 902 | 
 903 | 
 904 | 
 905 | 
 906 | 
 907 | 
 908 | 
 909 | 
 910 | 
 911 | 
 912 | 
 913 | 
 914 | 
 915 | 
 916 | 
 917 | 
 918 | 
 919 | 
 920 | 
 921 | 
 922 | 
 923 | 
 924 | 
 925 | 
 926 | 
 927 | 
 928 | 
 929 | 
 930 | 
 931 | 
 932 | 
 933 | 
 934 | 
 935 | 
 936 | 
 937 | 
 938 | 
 939 | 
 940 | 
 941 | 
 942 | 
 943 | 
 944 | 
 945 | 
 946 | 
 947 | 
 948 | 
 949 | 
 950 | 
 951 | 
 952 | 
 953 | 
 954 | 
 955 | 
 956 | 
 957 | 
 958 | 
 959 | 
 960 | 
 961 | 
 962 | 
 963 | 
 964 | 
 965 | 
 966 | 
 967 | 
 968 | 
 969 | 
 970 | 
 971 | 
 972 | 
 973 | 
 974 | 
 975 | 
 976 | 
 977 | 
 978 | 
 979 | 
 980 | 
 981 | 
 982 | 
 983 | 
 984 | 
 985 | 
 986 | 
 987 | 
 988 | 
 989 | 
 990 | 
 991 | 
 992 | 
 993 | 
 994 | 
 995 | 
 996 | 
 997 | 
 998 | 
 999 | 
1000 | 
1001 | 
1002 | 
1003 | 
1004 | 
1005 | 
1006 | 
1007 | 
1008 | 
1009 | 
1010 | 
1011 | 
1012 | 
1013 | 
1014 | 
1015 | 
1016 | 
1017 | 
1018 | 
1019 | 
1020 | 
1021 | 
1022 | 
1023 | 
1024 | 
1025 | 
1026 | 
1027 | 
1028 | 
1029 | 
1030 | 
1031 | 
1032 | 
1033 | 
1034 | 
1035 | 
1036 | 
1037 | 
1038 | 
1039 | 
1040 | 
1041 | 
1042 | 
1043 | 
1044 | 
1045 | 
1046 | 
1047 | 
1048 | 
1049 | 
1050 | 
1051 | 
1052 | 
1053 | 
1054 | 
1055 | 
1056 | 
1057 | 
1058 | 
1059 | 
1060 | 
1061 | 
1062 | 
1063 | 
1064 | 
1065 | 
1066 | 
1067 | 
1068 | 
1069 | 
1070 | 
1071 | 
1072 | 
1073 | 
1074 | 
1075 | 
1076 | 
1077 | 
1078 | 
1079 | 
1080 | 
1081 | 
1082 | 
1083 | 
1084 | 
1085 | 
1086 | 
1087 | 
1088 | 
1089 | 
1090 | 
1091 | 
1092 | 
1093 | 
1094 | 
1095 | 
1096 | 
1097 | 
1098 | 
1099 | 
1100 | 
1101 | 
1102 | 
1103 | 
1104 | 
1105 | 
1106 | 
1107 | 
1108 | 
1109 | 
1110 | 
1111 | 
1112 | 
1113 | 
1114 | 
1115 | 
1116 | 
1117 | 
1118 | 
1119 | 
1120 | 
1121 | 
1122 | 
1123 | 
1124 | 
1125 | 
1126 | 
1127 | 
1128 | 
1129 | 
1130 | 
1131 | 
1132 | 
1133 | 
1134 | 
1135 | 
1136 | 
1137 | 
1138 | 
1139 | 
1140 | 
1141 | 
1142 | 
1143 | 
1144 | 
1145 | 
1146 | 
1147 | 
1148 | 
1149 | 
1150 | 
1151 | 
1152 | 
1153 | 
1154 | 
1155 | 
1156 | 
1157 | 
1158 | 
1159 | 
1160 | 
1161 | 
1162 | 
1163 | 
1164 | 
1165 | 
1166 | 
1167 | 
1168 | 
1169 | 
1170 | 
1171 | 
1172 | 
1173 | 
1174 | 
1175 | 
1176 | 
1177 | 
1178 | 
1179 | 
1180 | 
1181 | 
1182 | 
1183 | 
1184 | 
1185 | 
1186 | 
1187 | 
1188 | 
1189 | 
1190 | 
1191 | 
1192 | 
1193 | 
1194 | 
1195 | 
1196 | 
1197 | 
1198 | 
1199 | 
1200 | 
1201 | 
1202 | 
1203 | 
1204 | 
1205 | 
1206 | 
1207 | 
1208 | 
1209 | 
1210 | 
1211 | 
1212 | 
1213 | 
1214 | 
1215 | 
1216 | 
1217 | 
1218 | 
1219 | 
1220 | 
1221 | 
1222 | 
1223 | 
1224 | 
1225 | 
1226 | 
1227 | 
1228 | 
1229 | 
1230 | 
1231 | 
1232 | 
1233 | 
1234 | 
1235 | 
1236 | 
1237 | 
1238 | 
1239 | 
1240 | 
1241 | 
1242 | 
1243 | 
1244 | 
1245 | 
1246 | 
1247 | 
1248 | 
1249 | 
1250 | 
1251 | 
1252 | 
1253 | 
1254 | 
1255 | 
1256 | 
1257 | 
1258 | 
1259 | 
1260 | 
1261 | 
1262 | 
1263 | 
1264 | 
1265 | 
1266 | 
1267 | 
1268 | 
1269 | 
1270 | 
1271 | 
1272 | 
1273 | 
1274 | 
1275 | 
1276 | 
1277 | 
1278 | 
1279 | 
1280 | 
1281 | 
1282 | 
1283 | 
1284 | 
1285 | 
1286 | 
1287 | 
1288 | 
1289 | 
1290 | 
1291 | 
1292 | 
1293 | 
1294 | 
1295 | 
1296 | 
1297 | 
1298 | 
1299 | 
1300 | 
1301 | 
1302 | 
1303 | 
1304 | 
1305 | 
1306 | 
1307 | 
1308 | 
1309 | 
1310 | 
1311 | 
1312 | 
1313 | 
1314 | 
1315 | 
1316 | 
1317 | 
1318 | 
1319 | 
1320 | 
1321 | 
1322 | 
1323 | 
1324 | 
1325 | 
1326 | 
1327 | 
1328 | 
1329 | 
1330 | 
1331 | 
1332 | 
1333 | 
1334 | 
1335 | 
1336 | 
1337 | 
1338 | 
1339 | 
1340 | 
1341 | 
1342 | 
1343 | 
1344 | 
1345 | 
1346 | 
1347 | 
1348 | 
1349 | 
1350 | 
1351 | 
1352 | 
1353 | 
1354 | 
1355 | 
1356 | 
1357 | 
1358 | 
1359 | 
1360 | 
1361 | 
1362 | 
1363 | 
1364 | 
1365 | 
1366 | 
1367 | 
1368 | 
1369 | 
1370 | 
1371 | 
1372 | 
1373 | 
1374 | 
1375 | 
1376 | 
1377 | 
1378 | 
1379 | 
1380 | 
1381 | 
1382 | 
1383 | 
1384 | 
1385 | 
1386 | 
1387 | 
1388 | 
1389 | 
1390 | 
1391 | 
1392 | 
1393 | 
1394 | 
1395 | 
1396 | 
1397 | 
1398 | 
1399 | 
1400 | 
1401 | 
1402 | 
1403 | 
1404 | 
1405 | 
1406 | 
1407 | 
1408 | 
1409 | 
1410 | 
1411 | 
1412 | 
1413 | 
1414 | 
1415 | 
1416 | 
1417 | 
1418 | 
1419 | 
1420 | 
1421 | 
1422 | 
1423 | 
1424 | 
1425 | 
1426 | 
1427 | 
1428 | 
1429 | 
1430 | 
1431 | 
1432 | 
1433 | 
1434 | 
1435 | 
1436 | 
1437 | 
1438 | 
1439 | 
1440 | 
1441 | 
1442 | 
1443 | 
1444 | 
1445 | 
1446 | 
1447 | 
1448 | 
1449 | 
1450 | 
1451 | 
1452 | 
1453 | 
1454 | 
1455 | 
1456 | 
1457 | 
1458 | 
1459 | 
1460 | 
1461 | 
1462 | 
1463 | 
1464 | 
1465 | 
1466 | 
1467 | 
1468 | 
1469 | 
1470 | 
1471 | 
1472 | 
1473 | 
1474 | 
1475 | 
1476 | 
1477 | 
1478 | 
1479 | 
1480 | 
1481 | 
1482 | 
1483 | 
1484 | 
1485 | 
1486 | 
1487 | 
1488 | 
1489 | </style>
1490 | 
1491 | <!-- Toolbar -->
1492 | <div class="toolbar" role="banner">
1493 |     <img
1494 |             width="40"
1495 |             alt="Angular Logo"
1496 |             src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
1497 |     />
1498 |     <span>Welcome</span>
1499 |     <div class="spacer"></div>
1500 |     <a aria-label="Angular on twitter" target="_blank" rel="noopener" href="https://twitter.com/angular"
1501 |        title="Twitter">
1502 | 
1503 |         <svg id="twitter-logo" height="24" data-name="Logo — FIXED" xmlns="http://www.w3.org/2000/svg"
1504 |              viewBox="0 0 400 400">
1505 |             <defs>
1506 |                 <style>
1507 |           .cls-1 {
1508 |             fill: none;
1509 |           }
1510 | 
1511 |           .cls-2 {
1512 |             fill: #ffffff;
1513 |           }
1514 | 
1515 | 
1516 | 
1517 | 
1518 | 
1519 | 
1520 | 
1521 | 
1522 | 
1523 | 
1524 | 
1525 | 
1526 | 
1527 | 
1528 | 
1529 | 
1530 | 
1531 | 
1532 | 
1533 | 
1534 | 
1535 | 
1536 | 
1537 | 
1538 | 
1539 | 
1540 | 
1541 | 
1542 | 
1543 | 
1544 | 
1545 | 
1546 | 
1547 | 
1548 | 
1549 | 
1550 | 
1551 | 
1552 | 
1553 | 
1554 | 
1555 | 
1556 | 
1557 | 
1558 | 
1559 | 
1560 | 
1561 | 
1562 | 
1563 | 
1564 | 
1565 | 
1566 | 
1567 | 
1568 | 
1569 | 
1570 | 
1571 | 
1572 | 
1573 | 
1574 | 
1575 | 
1576 | 
1577 | 
1578 | 
1579 | 
1580 | 
1581 | 
1582 | 
1583 | 
1584 | 
1585 | 
1586 | 
1587 | 
1588 | 
1589 | 
1590 | 
1591 | 
1592 | 
1593 | 
1594 | 
1595 | 
1596 | 
1597 | 
1598 | 
1599 | 
1600 | 
1601 | 
1602 | 
1603 | 
1604 | 
1605 | 
1606 | 
1607 | 
1608 | 
1609 | 
1610 | 
1611 | 
1612 | 
1613 | 
1614 | 
1615 | 
1616 | 
1617 | 
1618 | 
1619 | 
1620 | 
1621 | 
1622 | 
1623 | 
1624 | 
1625 | 
1626 | 
1627 | 
1628 | 
1629 | 
1630 | 
1631 | 
1632 | 
1633 | 
1634 | 
1635 | 
1636 | 
1637 | 
1638 | 
1639 | 
1640 | 
1641 | 
1642 | 
1643 | 
1644 | 
1645 | 
1646 | 
1647 | 
1648 | 
1649 | 
1650 | 
1651 | 
1652 | 
1653 | 
1654 | 
1655 | 
1656 | 
1657 | 
1658 | 
1659 | 
1660 | 
1661 | 
1662 | 
1663 | 
1664 | 
1665 | 
1666 | 
1667 | 
1668 | 
1669 | 
1670 | 
1671 | 
1672 | 
1673 | 
1674 | 
1675 | 
1676 | 
1677 | 
1678 | 
1679 | 
1680 | 
1681 | 
1682 | 
1683 | 
1684 | 
1685 | 
1686 | 
1687 | 
1688 | 
1689 | 
1690 | 
1691 | 
1692 | 
1693 | 
1694 | 
1695 | 
1696 | 
1697 | 
1698 | 
1699 | 
1700 | 
1701 | 
1702 | 
1703 | 
1704 | 
1705 | 
1706 | 
1707 | 
1708 | 
1709 | 
1710 | 
1711 | 
1712 | 
1713 | 
1714 | 
1715 | 
1716 | 
1717 | 
1718 | 
1719 | 
1720 | 
1721 | 
1722 | 
1723 | 
1724 | 
1725 | 
1726 | 
1727 | 
1728 | 
1729 | 
1730 | 
1731 | 
1732 | 
1733 | 
1734 | 
1735 | 
1736 | 
1737 | 
1738 | 
1739 | 
1740 | 
1741 | 
1742 | 
1743 | 
1744 | 
1745 | 
1746 | 
1747 | 
1748 | 
1749 | 
1750 | 
1751 | 
1752 | 
1753 | 
1754 | 
1755 | 
1756 | 
1757 | 
1758 | 
1759 | 
1760 | 
1761 | 
1762 | 
1763 | 
1764 | 
1765 | 
1766 | 
1767 | 
1768 | 
1769 | 
1770 | 
1771 | 
1772 | 
1773 | 
1774 | 
1775 | 
1776 | 
1777 | 
1778 | 
1779 | 
1780 | 
1781 | 
1782 | 
1783 | 
1784 | 
1785 | 
1786 | 
1787 | 
1788 | 
1789 | 
1790 | 
1791 | 
1792 | 
1793 | 
1794 | 
1795 | 
1796 | 
1797 | 
1798 | 
1799 | 
1800 | 
1801 | 
1802 | 
1803 | 
1804 | 
1805 | 
1806 | 
1807 | 
1808 | 
1809 | 
1810 | 
1811 | 
1812 | 
1813 | 
1814 | 
1815 | 
1816 | 
1817 | 
1818 | 
1819 | 
1820 | 
1821 | 
1822 | 
1823 | 
1824 | 
1825 | 
1826 | 
1827 | 
1828 | 
1829 | 
1830 | 
1831 | 
1832 | 
1833 | 
1834 | 
1835 | 
1836 | 
1837 | 
1838 | 
1839 | 
1840 | 
1841 | 
1842 | 
1843 | 
1844 | 
1845 | 
1846 | 
1847 | 
1848 | 
1849 | 
1850 | 
1851 | 
1852 | 
1853 | 
1854 | 
1855 | 
1856 | 
1857 | 
1858 | 
1859 | 
1860 | 
1861 | 
1862 | 
1863 | 
1864 | 
1865 | 
1866 | 
1867 | 
1868 | 
1869 | 
1870 | 
1871 | 
1872 | 
1873 | 
1874 | 
1875 | 
1876 | 
1877 | 
1878 | 
1879 | 
1880 | 
1881 | 
1882 | 
1883 | 
1884 | 
1885 | 
1886 | 
1887 | 
1888 | 
1889 | 
1890 | 
1891 | 
1892 | 
1893 | 
1894 | 
1895 | 
1896 | 
1897 | 
1898 | 
1899 | 
1900 | 
1901 | 
1902 | 
1903 | 
1904 | 
1905 | 
1906 | 
1907 | 
1908 | 
1909 | 
1910 | 
1911 | 
1912 | 
1913 | 
1914 | 
1915 | 
1916 | 
1917 | 
1918 | 
1919 | 
1920 | 
1921 | 
1922 | 
1923 | 
1924 | 
1925 | 
1926 | 
1927 | 
1928 | 
1929 | 
1930 | 
1931 | 
1932 | 
1933 | 
1934 | 
1935 | 
1936 | 
1937 | 
1938 | 
1939 | 
1940 | 
1941 | 
1942 | 
1943 | 
1944 | 
1945 | 
1946 | 
1947 | 
1948 | 
1949 | 
1950 | 
1951 | 
1952 | 
1953 | 
1954 | 
1955 | 
1956 | 
1957 | 
1958 | 
1959 | 
1960 | 
1961 | 
1962 | 
1963 | 
1964 | 
1965 | 
1966 | 
1967 | 
1968 | 
1969 | 
1970 | 
1971 | 
1972 | 
1973 | 
1974 | 
1975 | 
1976 | 
1977 | 
1978 | 
1979 | 
1980 | 
1981 | 
1982 | 
1983 | 
1984 | 
1985 | 
1986 | 
1987 | 
1988 | 
1989 | 
1990 | 
1991 | 
1992 | 
1993 | 
1994 | 
1995 | 
1996 | 
1997 | 
1998 | 
1999 | 
2000 | 
2001 | 
2002 | 
2003 | 
2004 | 
2005 | 
2006 | 
2007 | 
2008 | 
2009 | 
2010 | 
2011 | 
2012 | 
2013 | 
2014 | 
2015 | 
2016 | 
2017 | 
2018 | 
2019 | 
2020 | 
2021 | 
2022 | 
2023 | 
2024 | 
2025 | 
2026 | 
2027 | 
2028 | 
2029 | 
2030 | 
2031 | 
2032 | 
2033 | 
2034 | 
2035 | 
2036 | 
2037 | 
2038 | 
2039 | 
2040 | 
2041 | 
2042 | 
2043 | 
2044 | 
2045 | 
2046 | 
2047 | 
2048 | 
2049 | 
2050 | 
2051 | 
2052 | 
2053 | 
2054 | 
2055 | 
2056 | 
2057 | 
2058 | 
2059 | 
2060 | 
2061 | 
2062 | 
2063 | 
2064 | 
2065 | 
2066 | 
2067 | 
2068 | 
2069 | 
2070 | 
2071 | 
2072 | 
2073 | 
2074 | 
2075 | 
2076 | 
2077 | 
2078 | 
2079 | 
2080 | 
2081 | 
2082 | 
2083 | 
2084 | 
2085 | 
2086 | 
2087 | 
2088 | 
2089 | 
2090 | 
2091 | 
2092 | 
2093 | 
2094 | 
2095 | 
2096 | 
2097 | 
2098 | 
2099 | 
2100 | 
2101 | 
2102 | 
2103 | 
2104 | 
2105 | 
2106 | 
2107 | 
2108 | 
2109 | 
2110 | 
2111 | 
2112 | 
2113 | 
2114 | 
2115 | 
2116 | 
2117 | 
2118 | 
2119 | 
2120 | 
2121 | 
2122 | 
2123 | 
2124 | 
2125 | 
2126 | 
2127 | 
2128 | 
2129 | 
2130 | 
2131 | 
2132 | 
2133 | 
2134 | 
2135 | 
2136 | 
2137 | 
2138 | 
2139 | 
2140 | 
2141 | 
2142 | 
2143 | 
2144 | 
2145 | 
2146 | 
2147 | 
2148 | 
2149 | 
2150 | 
2151 | 
2152 | 
2153 | 
2154 | 
2155 | 
2156 | 
2157 | 
2158 | 
2159 | 
2160 | 
2161 | 
2162 | 
2163 | 
2164 | 
2165 | 
2166 | 
2167 | 
2168 | 
2169 | 
2170 | 
2171 | 
2172 | 
2173 | 
2174 | 
2175 | 
2176 | 
2177 | 
2178 | 
2179 | 
2180 | 
2181 | 
2182 | 
2183 | 
2184 | 
2185 | 
2186 | 
2187 | 
2188 | 
2189 | 
2190 | 
2191 | 
2192 | 
2193 | 
2194 | 
2195 | 
2196 | 
2197 | 
2198 | 
2199 | 
2200 | 
2201 | 
2202 | 
2203 | 
2204 | 
2205 | 
2206 | 
2207 | 
2208 | 
2209 | 
2210 | 
2211 | 
2212 | 
2213 | 
2214 | 
2215 | 
2216 | 
2217 | 
2218 | 
2219 | 
2220 | 
2221 | 
2222 | 
2223 | 
2224 | 
2225 | 
2226 | 
2227 | 
2228 | 
2229 | 
2230 | 
2231 | 
2232 | 
2233 | 
2234 | 
2235 | 
2236 | 
2237 | 
2238 | 
2239 | 
2240 | 
2241 | 
2242 | 
2243 | 
2244 | 
2245 | 
2246 | 
2247 | 
2248 | 
2249 | 
2250 | 
2251 | 
2252 | 
2253 | 
2254 | 
2255 | 
2256 | 
2257 | 
2258 | 
2259 | 
2260 | 
2261 | 
2262 | 
2263 | 
2264 | 
2265 | 
2266 | 
2267 | 
2268 | 
2269 | 
2270 | 
2271 | 
2272 | 
2273 | 
2274 | 
2275 | 
2276 | 
2277 | 
2278 | 
2279 | 
2280 | 
2281 | 
2282 | 
2283 | 
2284 | 
2285 | 
2286 | 
2287 | 
2288 | 
2289 | 
2290 | 
2291 | 
2292 | 
2293 | 
2294 | 
2295 | 
2296 | 
2297 | 
2298 | 
2299 | 
2300 | 
2301 | 
2302 | 
2303 | 
2304 | 
2305 | 
2306 | 
2307 | 
2308 | 
2309 | 
2310 | 
2311 | 
2312 | 
2313 | 
2314 | 
2315 | 
2316 | 
2317 | 
2318 | 
2319 | 
2320 | 
2321 | 
2322 | 
2323 | 
2324 | 
2325 | 
2326 | 
2327 | 
2328 | 
2329 | 
2330 | 
2331 | 
2332 | 
2333 | 
2334 | 
2335 | 
2336 | 
2337 | 
2338 | 
2339 | 
2340 | 
2341 | 
2342 | 
2343 | 
2344 | 
2345 | 
2346 | 
2347 | 
2348 | 
2349 | 
2350 | 
2351 | 
2352 | 
2353 | 
2354 | 
2355 | 
2356 | 
2357 | 
2358 | 
2359 | 
2360 | 
2361 | 
2362 | 
2363 | 
2364 | 
2365 | 
2366 | 
2367 | 
2368 | 
2369 | 
2370 | 
2371 | 
2372 | 
2373 | 
2374 | 
2375 | 
2376 | 
2377 | 
2378 | 
2379 | 
2380 | 
2381 | 
2382 | 
2383 | 
2384 | 
2385 | 
2386 | 
2387 | 
2388 | 
2389 | 
2390 | 
2391 | 
2392 | 
2393 | 
2394 | 
2395 | 
2396 | 
2397 | 
2398 | 
2399 | 
2400 | 
2401 | 
2402 | 
2403 | 
2404 | 
2405 | 
2406 | 
2407 | 
2408 | 
2409 | 
2410 | 
2411 | 
2412 | 
2413 | 
2414 | 
2415 | 
2416 | 
2417 | 
2418 | 
2419 | 
2420 | 
2421 | 
2422 | 
2423 | 
2424 | 
2425 | 
2426 | 
2427 | 
2428 | 
2429 | 
2430 | 
2431 | 
2432 | 
2433 | 
2434 | 
2435 | 
2436 | 
2437 | 
2438 | 
2439 | 
2440 | 
2441 | 
2442 | 
2443 | 
2444 | 
2445 | 
2446 | 
2447 | 
2448 | 
2449 | 
2450 | 
2451 | 
2452 | 
2453 | 
2454 | 
2455 | 
2456 | 
2457 | 
2458 | 
2459 | 
2460 | 
2461 | 
2462 | 
2463 | 
2464 | 
2465 | 
2466 | 
2467 | 
2468 | 
2469 | 
2470 | 
2471 | 
2472 | 
2473 | 
2474 | 
2475 | 
2476 | 
2477 | 
2478 | 
2479 | 
2480 | 
2481 | 
2482 | 
2483 | 
2484 | 
2485 | 
2486 | 
2487 | 
2488 | 
2489 | 
2490 | 
2491 | 
2492 | 
2493 | 
2494 | 
2495 | 
2496 | 
2497 | 
2498 | 
2499 | 
2500 | 
2501 | 
2502 | 
2503 | 
2504 | 
2505 | 
2506 | 
2507 | 
2508 | 
2509 | 
2510 | 
2511 | 
2512 | 
2513 | 
2514 | 
2515 | 
2516 | 
2517 | 
2518 | 
2519 | 
2520 | 
2521 | 
2522 | 
2523 | 
2524 | 
2525 | 
2526 | 
2527 | 
2528 | 
2529 | 
2530 | 
2531 | 
2532 | 
2533 | 
2534 | 
2535 | 
2536 | 
2537 | 
2538 | 
2539 | 
2540 | 
2541 | 
2542 | 
2543 | 
2544 | 
2545 | 
2546 | 
2547 | 
2548 | 
2549 | 
2550 | 
2551 | 
2552 | 
2553 | 
2554 | 
2555 | 
2556 | 
2557 | 
2558 | 
2559 | 
2560 | 
2561 | 
2562 | 
2563 | 
2564 | 
2565 | 
2566 | 
2567 | 
2568 | 
2569 | 
2570 | 
2571 | 
2572 | 
2573 | 
2574 | 
2575 | 
2576 | 
2577 | 
2578 | 
2579 | 
2580 | 
2581 | 
2582 | 
2583 | 
2584 | 
2585 | 
2586 | 
2587 | 
2588 | 
2589 | 
2590 | 
2591 | 
2592 | 
2593 | 
2594 | 
2595 | 
2596 | 
2597 | 
2598 | 
2599 | 
2600 | 
2601 | 
2602 | 
2603 | 
2604 | 
2605 | 
2606 | 
2607 | 
2608 | 
2609 | 
2610 | 
2611 | 
2612 | 
2613 | 
2614 | 
2615 | 
2616 | 
2617 | 
2618 | 
2619 | 
2620 | 
2621 | 
2622 | 
2623 | 
2624 | 
2625 | 
2626 | 
2627 | 
2628 | 
2629 | 
2630 | 
2631 | 
2632 | 
2633 | 
2634 | 
2635 | 
2636 | 
2637 | 
2638 | 
2639 | 
2640 | 
2641 | 
2642 | 
2643 | 
2644 | 
2645 | 
2646 | 
2647 | 
2648 | 
2649 | 
2650 | 
2651 | 
2652 | 
2653 | 
2654 | 
2655 | 
2656 | 
2657 | 
2658 | 
2659 | 
2660 | 
2661 | 
2662 | 
2663 | 
2664 | 
2665 | 
2666 | 
2667 | 
2668 | 
2669 | 
2670 | 
2671 | 
2672 | 
2673 | 
2674 | 
2675 | 
2676 | 
2677 | 
2678 | 
2679 | 
2680 | 
2681 | 
2682 | 
2683 | 
2684 | 
2685 | 
2686 | 
2687 | 
2688 | 
2689 | 
2690 | 
2691 | 
2692 | 
2693 | 
2694 | 
2695 | 
2696 | 
2697 | 
2698 | 
2699 | 
2700 | 
2701 | 
2702 | 
2703 | 
2704 | 
2705 | 
2706 | 
2707 |                 </style>
2708 |             </defs>
2709 |             <rect class="cls-1" width="400" height="400"/>
2710 |             <path class="cls-2"
2711 |                   d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23"
2712 |             />
2713 |         </svg>
2714 | 
2715 |     </a>
2716 | </div>
2717 | 
2718 | <div class="content" role="main">
2719 | 
2720 |     <!-- Highlight Card -->
2721 |     <div class="card highlight-card card-small">
2722 | 
2723 |         <svg id="rocket" alt="Rocket Ship" xmlns="http://www.w3.org/2000/svg" width="101.678" height="101.678"
2724 |              viewBox="0 0 101.678 101.678">
2725 |             <g id="Group_83" data-name="Group 83" transform="translate(-141 -696)">
2726 |                 <circle id="Ellipse_8" data-name="Ellipse 8" cx="50.839" cy="50.839" r="50.839"
2727 |                         transform="translate(141 696)" fill="#dd0031"/>
2728 |                 <g id="Group_47" data-name="Group 47" transform="translate(165.185 720.185)">
2729 |                     <path id="Path_33" data-name="Path 33"
2730 |                           d="M3.4,42.615a3.084,3.084,0,0,0,3.553,3.553,21.419,21.419,0,0,0,12.215-6.107L9.511,30.4A21.419,21.419,0,0,0,3.4,42.615Z"
2731 |                           transform="translate(0.371 3.363)" fill="#fff"/>
2732 |                     <path id="Path_34" data-name="Path 34"
2733 |                           d="M53.3,3.221A3.09,3.09,0,0,0,50.081,0,48.227,48.227,0,0,0,18.322,13.437c-6-1.666-14.991-1.221-18.322,7.218A33.892,33.892,0,0,1,9.439,25.1l-.333.666a3.013,3.013,0,0,0,.555,3.553L23.985,43.641a2.9,2.9,0,0,0,3.553.555l.666-.333A33.892,33.892,0,0,1,32.647,53.3c8.55-3.664,8.884-12.326,7.218-18.322A48.227,48.227,0,0,0,53.3,3.221ZM34.424,9.772a6.439,6.439,0,1,1,9.106,9.106,6.368,6.368,0,0,1-9.106,0A6.467,6.467,0,0,1,34.424,9.772Z"
2734 |                           transform="translate(0 0.005)" fill="#fff"/>
2735 |                 </g>
2736 |             </g>
2737 |         </svg>
2738 | 
2739 |         <span>{{ title }} app is running!</span>
2740 | 
2741 |         <svg id="rocket-smoke" alt="Rocket Ship Smoke" xmlns="http://www.w3.org/2000/svg" width="516.119"
2742 |              height="1083.632" viewBox="0 0 516.119 1083.632">
2743 |             <path id="Path_40" data-name="Path 40"
2744 |                   d="M644.6,141S143.02,215.537,147.049,870.207s342.774,201.755,342.774,201.755S404.659,847.213,388.815,762.2c-27.116-145.51-11.551-384.124,271.9-609.1C671.15,139.365,644.6,141,644.6,141Z"
2745 |                   transform="translate(-147.025 -140.939)" fill="#f5f5f5"/>
2746 |         </svg>
2747 | 
2748 |     </div>
2749 | 
2750 |     <!-- Resources -->
2751 |     <h2>Resources</h2>
2752 |     <p>Here are some links to help you get started:</p>
2753 | 
2754 |     <div class="card-container">
2755 |         <a class="card" target="_blank" rel="noopener" href="https://angular.io/tutorial">
2756 |             <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
2757 |                 <path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/>
2758 |             </svg>
2759 | 
2760 |             <span>Learn Angular</span>
2761 | 
2762 |             <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
2763 |                 <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
2764 |             </svg>
2765 |         </a>
2766 | 
2767 |         <a class="card" target="_blank" rel="noopener" href="https://angular.io/cli">
2768 |             <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
2769 |                 <path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/>
2770 |             </svg>
2771 | 
2772 |             <span>CLI Documentation</span>
2773 | 
2774 |             <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
2775 |                 <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
2776 |             </svg>
2777 |         </a>
2778 | 
2779 |         <a class="card" target="_blank" rel="noopener" href="https://blog.angular.io/">
2780 |             <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
2781 |                 <path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"/>
2782 |             </svg>
2783 | 
2784 |             <span>Angular Blog</span>
2785 | 
2786 |             <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
2787 |                 <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
2788 |             </svg>
2789 |         </a>
2790 | 
2791 |     </div>
2792 | 
2793 |     <!-- Next Steps -->
2794 |     <h2>Next Steps</h2>
2795 |     <p>What do you want to do next with your app?</p>
2796 | 
2797 |     <input type="hidden" #selection>
2798 | 
2799 |     <div class="card-container">
2800 |         <div class="card card-small" (click)="selection.value = 'component'" tabindex="0">
2801 |             <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
2802 |                 <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
2803 |             </svg>
2804 | 
2805 |             <span>New Component</span>
2806 |         </div>
2807 | 
2808 |         <div class="card card-small" (click)="selection.value = 'material'" tabindex="0">
2809 |             <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
2810 |                 <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
2811 |             </svg>
2812 | 
2813 |             <span>Angular Material</span>
2814 |         </div>
2815 | 
2816 |         <div class="card card-small" (click)="selection.value = 'dependency'" tabindex="0">
2817 |             <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
2818 |                 <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
2819 |             </svg>
2820 | 
2821 |             <span>Add Dependency</span>
2822 |         </div>
2823 | 
2824 |         <div class="card card-small" (click)="selection.value = 'test'" tabindex="0">
2825 |             <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
2826 |                 <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
2827 |             </svg>
2828 | 
2829 |             <span>Run and Watch Tests</span>
2830 |         </div>
2831 | 
2832 |         <div class="card card-small" (click)="selection.value = 'build'" tabindex="0">
2833 |             <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
2834 |                 <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
2835 |             </svg>
2836 | 
2837 |             <span>Build for Production</span>
2838 |         </div>
2839 |     </div>
2840 | 
2841 |     <!-- Terminal -->
2842 |     <div class="terminal" [ngSwitch]="selection.value">
2843 |         <pre *ngSwitchDefault>ng generate component xyz</pre>
2844 |         <pre *ngSwitchCase="'material'">ng add @angular/material</pre>
2845 |         <pre *ngSwitchCase="'dependency'">ng add _____</pre>
2846 |         <pre *ngSwitchCase="'test'">ng test</pre>
2847 |         <pre *ngSwitchCase="'build'">ng build --prod</pre>
2848 |     </div>
2849 | 
2850 |     <!-- Links -->
2851 |     <div class="card-container">
2852 |         <a class="circle-link" title="Animations" href="https://angular.io/guide/animations" target="_blank"
2853 |            rel="noopener">
2854 |             <svg id="Group_20" data-name="Group 20" xmlns="http://www.w3.org/2000/svg" width="21.813" height="23.453"
2855 |                  viewBox="0 0 21.813 23.453">
2856 |                 <path id="Path_15" data-name="Path 15"
2857 |                       d="M4099.584,972.736h0l-10.882,3.9,1.637,14.4,9.245,5.153,9.245-5.153,1.686-14.4Z"
2858 |                       transform="translate(-4088.702 -972.736)" fill="#ffa726"/>
2859 |                 <path id="Path_16" data-name="Path 16" d="M4181.516,972.736v23.453l9.245-5.153,1.686-14.4Z"
2860 |                       transform="translate(-4170.633 -972.736)" fill="#fb8c00"/>
2861 |                 <path id="Path_17" data-name="Path 17" d="M4137.529,1076.127l-7.7-3.723,4.417-2.721,7.753,3.723Z"
2862 |                       transform="translate(-4125.003 -1058.315)" fill="#ffe0b2"/>
2863 |                 <path id="Path_18" data-name="Path 18" d="M4137.529,1051.705l-7.7-3.723,4.417-2.721,7.753,3.723Z"
2864 |                       transform="translate(-4125.003 -1036.757)" fill="#fff3e0"/>
2865 |                 <path id="Path_19" data-name="Path 19" d="M4137.529,1027.283l-7.7-3.723,4.417-2.721,7.753,3.723Z"
2866 |                       transform="translate(-4125.003 -1015.199)" fill="#fff"/>
2867 |             </svg>
2868 |         </a>
2869 | 
2870 |         <a class="circle-link" title="CLI" href="https://cli.angular.io/" target="_blank" rel="noopener">
2871 |             <svg alt="Angular CLI Logo" xmlns="http://www.w3.org/2000/svg" width="21.762" height="23.447"
2872 |                  viewBox="0 0 21.762 23.447">
2873 |                 <g id="Group_21" data-name="Group 21" transform="translate(0)">
2874 |                     <path id="Path_20" data-name="Path 20"
2875 |                           d="M2660.313,313.618h0l-10.833,3.9,1.637,14.4,9.2,5.152,9.244-5.152,1.685-14.4Z"
2876 |                           transform="translate(-2649.48 -313.618)" fill="#37474f"/>
2877 |                     <path id="Path_21" data-name="Path 21" d="M2741.883,313.618v23.447l9.244-5.152,1.685-14.4Z"
2878 |                           transform="translate(-2731.05 -313.618)" fill="#263238"/>
2879 |                     <path id="Path_22" data-name="Path 22"
2880 |                           d="M2692.293,379.169h11.724V368.618h-11.724Zm11.159-.6h-10.608v-9.345h10.621v9.345Z"
2881 |                           transform="translate(-2687.274 -362.17)" fill="#fff"/>
2882 |                     <path id="Path_23" data-name="Path 23"
2883 |                           d="M2709.331,393.688l.4.416,2.265-2.28-2.294-2.294-.4.4,1.893,1.893Z"
2884 |                           transform="translate(-2702.289 -380.631)" fill="#fff"/>
2885 |                     <rect id="Rectangle_12" data-name="Rectangle 12" width="3.517" height="0.469"
2886 |                           transform="translate(9.709 13.744)" fill="#fff"/>
2887 |                 </g>
2888 |             </svg>
2889 |         </a>
2890 | 
2891 |         <a class="circle-link" title="Augury" href="https://augury.rangle.io/" target="_blank" rel="noopener">
2892 |             <svg alt="Angular Augury Logo" xmlns="http://www.w3.org/2000/svg"
2893 |                  width="21.81" height="23.447" viewBox="0 0 21.81 23.447">
2894 |                 <defs>
2895 |                     <clipPath id="clip-path">
2896 |                         <rect id="Rectangle_13" data-name="Rectangle 13" width="10.338" height="10.27" fill="none"/>
2897 |                     </clipPath>
2898 |                 </defs>
2899 |                 <g id="Group_25" data-name="Group 25" transform="translate(0)">
2900 |                     <path id="Path_24" data-name="Path 24"
2901 |                           d="M3780.155,311.417h0l-10.881,3.9,1.637,14.4,9.244,5.152,9.244-5.152,1.685-14.4Z"
2902 |                           transform="translate(-3769.274 -311.417)" fill="#4a3493"/>
2903 |                     <path id="Path_25" data-name="Path 25" d="M3862.088,311.417v23.447l9.244-5.152,1.685-14.4Z"
2904 |                           transform="translate(-3851.207 -311.417)" fill="#311b92"/>
2905 |                     <g id="Group_24" data-name="Group 24" transform="translate(6.194 6.73)" opacity="0.5">
2906 |                         <g id="Group_23" data-name="Group 23" transform="translate(0 0)">
2907 |                             <g id="Group_22" data-name="Group 22" clip-path="url(#clip-path)">
2908 |                                 <path id="Path_26" data-name="Path 26"
2909 |                                       d="M3832.4,373.252a5.168,5.168,0,1,1-5.828-4.383,5.216,5.216,0,0,1,2.574.3,3.017,3.017,0,1,0,3.252,4.086Z"
2910 |                                       transform="translate(-3822.107 -368.821)" fill="#fff"/>
2911 |                             </g>
2912 |                         </g>
2913 |                     </g>
2914 |                     <path id="Path_27" data-name="Path 27"
2915 |                           d="M3830.582,370.848a5.162,5.162,0,1,1-3.254-4.086,3.017,3.017,0,1,0,3.252,4.086Z"
2916 |                           transform="translate(-3814.311 -359.969)" fill="#fff"/>
2917 |                 </g>
2918 |             </svg>
2919 |         </a>
2920 | 
2921 |         <a class="circle-link" title="Protractor" href="https://www.protractortest.org/" target="_blank" rel="noopener">
2922 |             <svg alt="Angular Protractor Logo" xmlns="http://www.w3.org/2000/svg" width="21.81" height="23.447"
2923 |                  viewBox="0 0 21.81 23.447">
2924 |                 <g id="Group_26" data-name="Group 26" transform="translate(0)">
2925 |                     <path id="Path_28" data-name="Path 28"
2926 |                           d="M4620.155,311.417h0l-10.881,3.9,1.637,14.4,9.244,5.152,9.244-5.152,1.685-14.4Z"
2927 |                           transform="translate(-4609.274 -311.417)" fill="#e13439"/>
2928 |                     <path id="Path_29" data-name="Path 29" d="M4702.088,311.417v23.447l9.244-5.152,1.685-14.4Z"
2929 |                           transform="translate(-4691.207 -311.417)" fill="#b52f32"/>
2930 |                     <path id="Path_30" data-name="Path 30"
2931 |                           d="M4651.044,369.58v-.421h1.483a7.6,7.6,0,0,0-2.106-5.052l-1.123,1.123-.3-.3,1.122-1.121a7.588,7.588,0,0,0-4.946-2.055v1.482h-.421v-1.485a7.589,7.589,0,0,0-5.051,2.058l1.122,1.121-.3.3-1.123-1.123a7.591,7.591,0,0,0-2.106,5.052h1.482v.421h-1.489v1.734h15.241V369.58Zm-10.966-.263a4.835,4.835,0,0,1,9.67,0Z"
2932 |                           transform="translate(-4634.008 -355.852)" fill="#fff"/>
2933 |                 </g>
2934 |             </svg>
2935 |         </a>
2936 | 
2937 |         <a class="circle-link" title="Find a Local Meetup" href="https://www.meetup.com/find/?keywords=angular"
2938 |            target="_blank" rel="noopener">
2939 |             <svg alt="Meetup Logo" xmlns="http://www.w3.org/2000/svg" width="24.607" height="23.447"
2940 |                  viewBox="0 0 24.607 23.447">
2941 |                 <path id="logo--mSwarm"
2942 |                       d="M21.221,14.95A4.393,4.393,0,0,1,17.6,19.281a4.452,4.452,0,0,1-.8.069c-.09,0-.125.035-.154.117a2.939,2.939,0,0,1-2.506,2.091,2.868,2.868,0,0,1-2.248-.624.168.168,0,0,0-.245-.005,3.926,3.926,0,0,1-2.589.741,4.015,4.015,0,0,1-3.7-3.347,2.7,2.7,0,0,1-.043-.38c0-.106-.042-.146-.143-.166a3.524,3.524,0,0,1-1.516-.69A3.623,3.623,0,0,1,2.23,14.557a3.66,3.66,0,0,1,1.077-3.085.138.138,0,0,0,.026-.2,3.348,3.348,0,0,1-.451-1.821,3.46,3.46,0,0,1,2.749-3.28.44.44,0,0,0,.355-.281,5.072,5.072,0,0,1,3.863-3,5.028,5.028,0,0,1,3.555.666.31.31,0,0,0,.271.03A4.5,4.5,0,0,1,18.3,4.7a4.4,4.4,0,0,1,1.334,2.751,3.658,3.658,0,0,1,.022.706.131.131,0,0,0,.1.157,2.432,2.432,0,0,1,1.574,1.645,2.464,2.464,0,0,1-.7,2.616c-.065.064-.051.1-.014.166A4.321,4.321,0,0,1,21.221,14.95ZM13.4,14.607a2.09,2.09,0,0,0,1.409,1.982,4.7,4.7,0,0,0,1.275.221,1.807,1.807,0,0,0,.9-.151.542.542,0,0,0,.321-.545.558.558,0,0,0-.359-.534,1.2,1.2,0,0,0-.254-.078c-.262-.047-.526-.086-.787-.138a.674.674,0,0,1-.617-.75,3.394,3.394,0,0,1,.218-1.109c.217-.658.509-1.286.79-1.918a15.609,15.609,0,0,0,.745-1.86,1.95,1.95,0,0,0,.06-1.073,1.286,1.286,0,0,0-1.051-1.033,1.977,1.977,0,0,0-1.521.2.339.339,0,0,1-.446-.042c-.1-.092-.2-.189-.307-.284a1.214,1.214,0,0,0-1.643-.061,7.563,7.563,0,0,1-.614.512A.588.588,0,0,1,10.883,8c-.215-.115-.437-.215-.659-.316a2.153,2.153,0,0,0-.695-.248A2.091,2.091,0,0,0,7.541,8.562a9.915,9.915,0,0,0-.405.986c-.559,1.545-1.015,3.123-1.487,4.7a1.528,1.528,0,0,0,.634,1.777,1.755,1.755,0,0,0,1.5.211,1.35,1.35,0,0,0,.824-.858c.543-1.281,1.032-2.584,1.55-3.875.142-.355.28-.712.432-1.064a.548.548,0,0,1,.851-.24.622.622,0,0,1,.185.539,2.161,2.161,0,0,1-.181.621c-.337.852-.68,1.7-1.018,2.552a2.564,2.564,0,0,0-.173.528.624.624,0,0,0,.333.71,1.073,1.073,0,0,0,.814.034,1.22,1.22,0,0,0,.657-.655q.758-1.488,1.511-2.978.35-.687.709-1.37a1.073,1.073,0,0,1,.357-.434.43.43,0,0,1,.463-.016.373.373,0,0,1,.153.387.7.7,0,0,1-.057.236c-.065.157-.127.316-.2.469-.42.883-.846,1.763-1.262,2.648A2.463,2.463,0,0,0,13.4,14.607Zm5.888,6.508a1.09,1.09,0,0,0-2.179.006,1.09,1.09,0,0,0,2.179-.006ZM1.028,12.139a1.038,1.038,0,1,0,.01-2.075,1.038,1.038,0,0,0-.01,2.075ZM13.782.528a1.027,1.027,0,1,0-.011,2.055A1.027,1.027,0,0,0,13.782.528ZM22.21,6.95a.882.882,0,0,0-1.763.011A.882.882,0,0,0,22.21,6.95ZM4.153,4.439a.785.785,0,1,0,.787-.78A.766.766,0,0,0,4.153,4.439Zm8.221,18.22a.676.676,0,1,0-.677.666A.671.671,0,0,0,12.374,22.658ZM22.872,12.2a.674.674,0,0,0-.665.665.656.656,0,0,0,.655.643.634.634,0,0,0,.655-.644A.654.654,0,0,0,22.872,12.2ZM7.171-.123A.546.546,0,0,0,6.613.43a.553.553,0,1,0,1.106,0A.539.539,0,0,0,7.171-.123ZM24.119,9.234a.507.507,0,0,0-.493.488.494.494,0,0,0,.494.494.48.48,0,0,0,.487-.483A.491.491,0,0,0,24.119,9.234Zm-19.454,9.7a.5.5,0,0,0-.488-.488.491.491,0,0,0-.487.5.483.483,0,0,0,.491.479A.49.49,0,0,0,4.665,18.936Z"
2943 |                       transform="translate(0 0.123)" fill="#f64060"/>
2944 |             </svg>
2945 |         </a>
2946 | 
2947 |         <a class="circle-link" title="Join the Conversation on Gitter" href="https://gitter.im/angular/angular"
2948 |            target="_blank" rel="noopener">
2949 |             <svg alt="Gitter Logo" xmlns="http://www.w3.org/2000/svg" width="19.447" height="19.447"
2950 |                  viewBox="0 0 19.447 19.447">
2951 |                 <g id="Group_40" data-name="Group 40" transform="translate(-1612 -405)">
2952 |                     <rect id="Rectangle_19" data-name="Rectangle 19" width="19.447" height="19.447"
2953 |                           transform="translate(1612 405)" fill="#e60257"/>
2954 |                     <g id="gitter" transform="translate(1617.795 408.636)">
2955 |                         <g id="Group_33" data-name="Group 33" transform="translate(0 0)">
2956 |                             <rect id="Rectangle_15" data-name="Rectangle 15" width="1.04" height="9.601"
2957 |                                   transform="translate(2.304 2.324)" fill="#fff"/>
2958 |                             <rect id="Rectangle_16" data-name="Rectangle 16" width="1.04" height="9.601"
2959 |                                   transform="translate(4.607 2.324)" fill="#fff"/>
2960 |                             <rect id="Rectangle_17" data-name="Rectangle 17" width="1.04" height="4.648"
2961 |                                   transform="translate(6.91 2.324)" fill="#fff"/>
2962 |                             <rect id="Rectangle_18" data-name="Rectangle 18" width="1.04" height="6.971"
2963 |                                   transform="translate(0 0)" fill="#fff"/>
2964 |                         </g>
2965 |                     </g>
2966 |                 </g>
2967 |             </svg>
2968 |         </a>
2969 |     </div>
2970 | 
2971 |     <!-- Footer -->
2972 |     <footer>
2973 |         Love Angular?&nbsp;
2974 |         <a href="https://github.com/angular/angular" target="_blank" rel="noopener"> Give our repo a star.
2975 |             <div class="github-star-badge">
2976 |                 <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
2977 |                      viewBox="0 0 24 24">
2978 |                     <path d="M0 0h24v24H0z" fill="none"/>
2979 |                     <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
2980 |                 </svg>
2981 |                 Star
2982 |             </div>
2983 |         </a>
2984 |         <a href="https://github.com/angular/angular" target="_blank" rel="noopener">
2985 |             <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
2986 |                 <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="#1976d2"/>
2987 |                 <path d="M0 0h24v24H0z" fill="none"/>
2988 |             </svg>
2989 |         </a>
2990 |     </footer>
2991 | 
2992 |     <svg id="clouds" alt="Gray Clouds Background" xmlns="http://www.w3.org/2000/svg" width="2611.084" height="485.677"
2993 |          viewBox="0 0 2611.084 485.677">
2994 |         <path id="Path_39" data-name="Path 39"
2995 |               d="M2379.709,863.793c10-93-77-171-168-149-52-114-225-105-264,15-75,3-140,59-152,133-30,2.83-66.725,9.829-93.5,26.25-26.771-16.421-63.5-23.42-93.5-26.25-12-74-77-130-152-133-39-120-212-129-264-15-54.084-13.075-106.753,9.173-138.488,48.9-31.734-39.726-84.4-61.974-138.487-48.9-52-114-225-105-264,15a162.027,162.027,0,0,0-103.147,43.044c-30.633-45.365-87.1-72.091-145.206-58.044-52-114-225-105-264,15-75,3-140,59-152,133-53,5-127,23-130,83-2,42,35,72,70,86,49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33,61.112,8.015,113.854-5.72,150.492-29.764a165.62,165.62,0,0,0,110.861-3.236c47,94,178,113,251,33,31.385,4.116,60.563,2.495,86.487-3.311,25.924,5.806,55.1,7.427,86.488,3.311,73,80,204,61,251-33a165.625,165.625,0,0,0,120,0c51,13,108,15,157-5a147.188,147.188,0,0,0,33.5-18.694,147.217,147.217,0,0,0,33.5,18.694c49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33C2446.709,1093.793,2554.709,922.793,2379.709,863.793Z"
2996 |               transform="translate(142.69 -634.312)" fill="#eee"/>
2997 |     </svg>
2998 | 
2999 | </div>
3000 | 
3001 | <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
3002 | <!-- * * * * * * * * * * * The content above * * * * * * * * * * * -->
3003 | <!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
3004 | <!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
3005 | <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
3006 | <!-- * * * * * * * * * * End of Placeholder * * * * * * * * * * * -->
3007 | <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
3008 | 
3009 | 
3010 | <router-outlet></router-outlet>
3011 | 


--------------------------------------------------------------------------------
/src/app/app.component.scss:
--------------------------------------------------------------------------------
 1 | :host {
 2 |     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 3 |     font-size: 14px;
 4 |     color: #333;
 5 |     max-width: 100%;
 6 |     box-sizing: border-box;
 7 |     -webkit-font-smoothing: antialiased;
 8 |     -moz-osx-font-smoothing: grayscale;
 9 | }
10 | 
11 | h1,
12 | h2,
13 | h3,
14 | h4,
15 | h5,
16 | h6 {
17 |     margin: 8px 0;
18 | }
19 | 
20 | p {
21 |     margin: 0;
22 | }
23 | 
24 | .spacer {
25 |     flex: 1;
26 | }
27 | 
28 | .toolbar {
29 |     height: 5rem;
30 |     width: 100vw;
31 |     display: flex;
32 |     justify-content: space-between;
33 |     align-items: center;
34 |     // background-color: #1976d2;
35 |     color: white;
36 |     span {
37 |         font-weight: 900;
38 |         margin: 0 auto;
39 |         font-family: 'Gloria Hallelujah', cursive;
40 |         font-size: 3rem;
41 |         color: #FF5733;
42 |     }
43 | 
44 | }
45 | 
46 | .watermark {
47 |     display: flex;
48 |     position: absolute;
49 |     width: 100vw;
50 |     opacity: 0.3;
51 |     top: -40vh;
52 |     left: -40vw;
53 | }
54 | 
55 | #mike {
56 |     position: absolute;
57 |     top: 90vh;
58 |     right: 10vw;
59 | }
60 | 
61 | @media screen and (max-width: 767px) {
62 |     .toolbar span {
63 |         margin: 0 auto;
64 |         font-family: 'Gloria Hallelujah', cursive;
65 |         font-size: 2rem;
66 |         color: #FF5733;
67 |     }
68 |     .watermark {
69 |         display: flex;
70 |         position: absolute;
71 |         width: 100vw;
72 |         opacity: 0.3;
73 |         top: -40vh;
74 |         left: -50vw;
75 |     }
76 | }
77 | 
78 | 
79 | @media screen and (max-width: 414px) {
80 |     .toolbar span {
81 |         margin: 0 auto;
82 |         font-family: 'Gloria Hallelujah', cursive;
83 |         font-size: 1.2rem;
84 |         color: #FF5733;
85 |     }
86 |     .watermark {
87 |         display: flex;
88 |         position: absolute;
89 |         width: 100vw;
90 |         opacity: 0.3;
91 |         top: -40vh;
92 |         left: -50vw;
93 |     }
94 | }
95 | 


--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed, async } from '@angular/core/testing';
 2 | import { RouterTestingModule } from '@angular/router/testing';
 3 | import { AppComponent } from './app.component';
 4 | 
 5 | describe('AppComponent', () => {
 6 |   beforeEach(async(() => {
 7 |     TestBed.configureTestingModule({
 8 |       imports: [
 9 |         RouterTestingModule
10 |       ],
11 |       declarations: [
12 |         AppComponent
13 |       ],
14 |     }).compileComponents();
15 |   }));
16 | 
17 |   it('should create the app', () => {
18 |     const fixture = TestBed.createComponent(AppComponent);
19 |     const app = fixture.debugElement.componentInstance;
20 |     expect(app).toBeTruthy();
21 |   });
22 | 
23 |   it(`should have as title 'd3-in-angular'`, () => {
24 |     const fixture = TestBed.createComponent(AppComponent);
25 |     const app = fixture.debugElement.componentInstance;
26 |     expect(app.title).toEqual('d3-in-angular');
27 |   });
28 | 
29 |   it('should render title', () => {
30 |     const fixture = TestBed.createComponent(AppComponent);
31 |     fixture.detectChanges();
32 |     const compiled = fixture.debugElement.nativeElement;
33 |     expect(compiled.querySelector('.content span').textContent).toContain('d3-in-angular app is running!');
34 |   });
35 | });
36 | 


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, NgZone } from '@angular/core';
 2 | import { Router } from '@angular/router';
 3 | import { ChartControlsService } from './chart-controls.service';
 4 | 
 5 | //https://stackoverflow.com/questions/38087013/angular2-web-speech-api-voice-recognition
 6 | export interface IWindow extends Window {
 7 |   webkitSpeechRecognition: any;
 8 |   webkitAudioContext: any;
 9 | }
10 | 
11 | @Component({
12 |   selector: 'app-root',
13 |   templateUrl: './app.component.html',
14 |   styleUrls: ['./app.component.scss']
15 | })
16 | export class AppComponent implements OnInit {
17 |   title = 'Using d3 within Angular 8';
18 |   speechRecogitionState = false;
19 |   flashMob = false;
20 | 
21 |   constructor(
22 |     private router: Router,
23 |     private ngZone: NgZone,
24 |     public chartControlsService: ChartControlsService) { }
25 | 
26 |   ngOnInit() {
27 |   }
28 | 
29 |   toggleSpeechRecognition() {
30 |     if ('webkitSpeechRecognition' in window) {
31 |       const { webkitSpeechRecognition }: IWindow = <IWindow>(window as unknown);
32 |       const recognition = new webkitSpeechRecognition();
33 | 
34 |       recognition.continuous = true;
35 |       recognition.onresult = (event) => {
36 |         const voiceCommand = event.results[event.results.length - 1][0].transcript;
37 | 
38 |         this.handleVoiceCommand(voiceCommand);
39 |       }
40 | 
41 |       recognition.start();
42 |     }
43 |   }
44 | 
45 |   handleVoiceCommand(command) {
46 |     const deliveryMatcher = new RegExp('.*delivery.*',"i");
47 |     const statusMatcher = new RegExp('.*status.*',"i");
48 |     const hideMatcher = new RegExp('.*hide.*data.*',"i");
49 |     const showMatcher = new RegExp('.*show.*data.*',"i");
50 |     const flashMatcher = new RegExp('.*flash.*',"i");
51 |     if (deliveryMatcher.test(command.trim())) {
52 |       this.navigate('/delivery');
53 |       return;
54 |     }
55 |     if (statusMatcher.test(command.trim())) {
56 |       this.navigate('/status');
57 |       return;
58 |     }
59 |     if (showMatcher.test(command.trim())) {
60 |       this.chartControlsService.showData = true;
61 |       return;
62 |     }
63 |     if (hideMatcher.test(command.trim())) {
64 |       this.chartControlsService.showData = false;
65 |       return;
66 |     }
67 |     if (flashMatcher.test(command.trim())) {
68 |       this.chartControlsService.fullScreen = true;
69 |       this.navigate('/flashmob');
70 |       return;
71 |     }
72 |   }
73 | 
74 |   navigate(path) {
75 |     this.ngZone.run(() => {
76 |       this.router.navigate([path]);
77 |     });
78 | 
79 |   }
80 | 
81 | }
82 | 


--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { BrowserModule } from '@angular/platform-browser';
 2 | import { NgModule } from '@angular/core';
 3 | 
 4 | import { AppRoutingModule } from './app-routing.module';
 5 | import { AppComponent } from './app.component';
 6 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 7 | import {MatMenuModule} from '@angular/material/menu';
 8 | import {MatCardModule} from '@angular/material/card';
 9 | import {MatIconModule} from '@angular/material/icon';
10 | import {MatSelectModule} from '@angular/material/select';
11 | import {MatButtonModule} from '@angular/material/button';
12 | import {MatTableModule} from '@angular/material/table';
13 | import {MatSlideToggleModule} from '@angular/material/slide-toggle';
14 | import { OrderStatusComponent } from './order-status/order-status.component';
15 | import { DonutChartComponent } from './donut-chart/donut-chart.component';
16 | import { OrderDeliveryComponent } from './order-delivery/order-delivery.component';
17 | import { AreaChartComponent } from './area-chart/area-chart.component';
18 | import { FlashMobComponent } from './fm/flash-mob.component';
19 | 
20 | @NgModule({
21 |   declarations: [
22 |     AppComponent,
23 |     OrderStatusComponent,
24 |     DonutChartComponent,
25 |     OrderDeliveryComponent,
26 |     AreaChartComponent,
27 |     FlashMobComponent
28 |   ],
29 |   imports: [
30 |     BrowserModule,
31 |     AppRoutingModule,
32 |     BrowserAnimationsModule,
33 |     MatMenuModule,
34 |     MatIconModule,
35 |     MatCardModule,
36 |     MatSelectModule,
37 |     MatTableModule,
38 |     MatButtonModule,
39 |     MatSlideToggleModule
40 |     
41 |   ],
42 |   providers: [],
43 |   bootstrap: [AppComponent]
44 | })
45 | export class AppModule { }
46 | 


--------------------------------------------------------------------------------
/src/app/area-chart/area-chart.component.html:
--------------------------------------------------------------------------------
1 | <svg>
2 | 
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/src/app/area-chart/area-chart.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mpdroid/d3-in-angular/b80f5668a1e79aaca0df3ce59716ca0a6c6f4544/src/app/area-chart/area-chart.component.scss


--------------------------------------------------------------------------------
/src/app/area-chart/area-chart.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { AreaChartComponent } from './area-chart.component';
 4 | 
 5 | describe('AreaChartComponent', () => {
 6 |   let component: AreaChartComponent;
 7 |   let fixture: ComponentFixture<AreaChartComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [AreaChartComponent]
12 |     })
13 |       .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(AreaChartComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/app/area-chart/area-chart.component.ts:
--------------------------------------------------------------------------------
  1 | import { Component, OnInit, ElementRef, ViewEncapsulation, Input, SimpleChanges, OnChanges } from '@angular/core';
  2 | 
  3 | import * as d3 from 'd3';
  4 | 
  5 | @Component({
  6 |     selector: 'app-area-chart',
  7 |     encapsulation: ViewEncapsulation.None,
  8 |     templateUrl: './area-chart.component.html',
  9 |     styleUrls: ['./area-chart.component.scss']
 10 | })
 11 | export class AreaChartComponent implements OnInit, OnChanges {
 12 |     @Input() transitionTime = 1000;
 13 |     @Input() xmax = 45;
 14 |     @Input() ymax = 200;
 15 |     @Input() hticks = 60;
 16 |     @Input() data: number[];
 17 |     @Input() showLabel = 1;
 18 |     hostElement; // Native element hosting the SVG container
 19 |     svg; // Top level SVG element
 20 |     g; // SVG Group element
 21 |     colorScale; // D3 color provider
 22 |     x; // X-axis graphical coordinates
 23 |     y; // Y-axis graphical coordinates
 24 |     colors = d3.scaleOrdinal(d3.schemeCategory10);
 25 |     bins; // Array of frequency distributions - one for each area chaer
 26 |     paths; // Path elements for each area chart
 27 |     area; // For D3 area function
 28 |     histogram; // For D3 histogram function
 29 | 
 30 |     constructor(private elRef: ElementRef) {
 31 |         this.hostElement = this.elRef.nativeElement;
 32 |     }
 33 | 
 34 |     ngOnInit() {
 35 |     }
 36 | 
 37 |     ngOnChanges(changes: SimpleChanges) {
 38 |         if (changes.data) {
 39 |             this.updateChart(changes.data.currentValue);
 40 |         }
 41 |     }
 42 | 
 43 |     private createChart(data: number[]) {
 44 | 
 45 |         this.removeExistingChartFromParent();
 46 | 
 47 |         this.setChartDimensions();
 48 | 
 49 |         this.setColorScale();
 50 | 
 51 |         this.addGraphicsElement();
 52 | 
 53 |         this.createXAxis();
 54 | 
 55 |         this.createYAxis();
 56 | 
 57 |         // d3 area and histogram functions  has to be declared after x and y functions are defined
 58 |         this.area = d3.area()
 59 |             .x((datum: any) => this.x(d3.mean([datum.x1, datum.x2])))
 60 |             .y0(this.y(0))
 61 |             .y1((datum: any) => this.y(datum.length));
 62 | 
 63 | 
 64 |         this.histogram = d3.histogram()
 65 |             .value((datum) => datum)
 66 |             .domain([0, this.xmax])
 67 |             .thresholds(this.x.ticks(this.hticks));
 68 | 
 69 |         // data has to be processed after area and histogram functions are defined
 70 |         this.processData(data);
 71 | 
 72 |         this.createAreaCharts();
 73 | 
 74 |     }
 75 | 
 76 |     private processData(data) {
 77 |         this.bins = [];
 78 |         data.forEach((row) => {
 79 |             this.bins.push(this.histogram(row))
 80 |         });
 81 |     }
 82 | 
 83 |     private setChartDimensions() {
 84 |         let viewBoxHeight = 100;
 85 |         let viewBoxWidth = 200;
 86 |         this.svg = d3.select(this.hostElement).append('svg')
 87 |             .attr('width', '100%')
 88 |             .attr('height', '100%')
 89 |             .attr('viewBox', '0 0 ' + viewBoxWidth + ' ' + viewBoxHeight);
 90 |     }
 91 | 
 92 |     private addGraphicsElement() {
 93 |         this.g = this.svg.append("g")
 94 |             .attr("transform", "translate(0,0)");
 95 |     }
 96 | 
 97 |     private setColorScale() {
 98 |         this.colorScale = d3.scaleOrdinal(d3.schemeCategory10);
 99 |         // Below is an example of using custom colors
100 |         // this.colorScale = d3.scaleOrdinal().domain(["0","1","2","3"]).range(['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728']);
101 |     }
102 | 
103 |     private createXAxis() {
104 |         this.x = d3.scaleLinear()
105 |             .domain([0, this.xmax])
106 |             .range([30, 170]);
107 |         this.g.append('g')
108 |             .attr('transform', 'translate(0,90)')
109 |             .attr("stroke-width", 0.5)
110 |             .call(d3.axisBottom(this.x).tickSize(0).tickFormat(<any>''));
111 | 
112 |         this.g.append('g')
113 |             .attr('transform', 'translate(0,90)')
114 |             .style('font-size', '6')
115 |             .style("stroke-dasharray", ("1,1"))
116 |             .attr("stroke-width", 0.1)
117 |             .call(d3.axisBottom(this.x).ticks(10).tickSize(-80));
118 | 
119 |     }
120 | 
121 |     private createYAxis() {
122 |         this.y = d3.scaleLinear()
123 |             .domain([0, this.ymax])
124 |             .range([90, 10]);
125 |         this.g.append('g')
126 |             .attr('transform', 'translate(30,0)')
127 |             .attr("stroke-width", 0.5)
128 |             .call(d3.axisLeft(this.y).tickSize(0).tickFormat(<any>''));
129 |         this.g.append('g')
130 |             .attr('transform', 'translate(30,0)')
131 |             .style("stroke-dasharray", ("1,1"))
132 |             .attr("stroke-width", 0.1)
133 |             .call(d3.axisLeft(this.y).ticks(4).tickSize(-140))
134 |             .style('font-size', '6');
135 | 
136 |         if (this.showLabel === 1) {
137 |             this.g.append('text')
138 |             .attr('text-anchor', 'middle')
139 |             .attr('transform', 'translate(10,50) rotate(-90)')
140 |             .style('font-size', 8)
141 |             .text('Frequency');
142 |         }
143 |     }
144 |     private createAreaCharts() {
145 |         this.paths = [];
146 |         this.bins.forEach((row, index) => {
147 |             this.paths.push(this.g.append('path')
148 |                 .datum(row)
149 |                 .attr('fill', this.colorScale('' + index))
150 |                 .attr("stroke-width", 0.1)
151 |                 .attr('opacity', 0.5)
152 |                 .attr('d', (datum: any) => this.area(datum))
153 |             );
154 |         });
155 |     }
156 | 
157 |     public updateChart(data: number[]) {
158 |         if (!this.svg) {
159 |             this.createChart(data);
160 |             return;
161 |         }
162 | 
163 |         this.processData(data);
164 | 
165 |         this.updateAreaCharts();
166 | 
167 |     }
168 | 
169 |     private updateAreaCharts() {
170 |         this.paths.forEach((path, index) => {
171 |             path.datum(this.bins[index])
172 |                 .transition().duration(this.transitionTime)
173 |                 .attr('d', d3.area()
174 |                     .x((datum: any) => this.x(d3.mean([datum.x1, datum.x2])))
175 |                     .y0(this.y(0))
176 |                     .y1((datum: any) => this.y(datum.length)));
177 | 
178 |         });
179 |     }
180 | 
181 |     private removeExistingChartFromParent() {
182 |         // !!!!Caution!!!
183 |         // Make sure not to do;
184 |         //     d3.select('svg').remove();
185 |         // That will clear all other SVG elements in the DOM
186 |         d3.select(this.hostElement).select('svg').remove();
187 |     }
188 | }
189 | 
190 | 


--------------------------------------------------------------------------------
/src/app/chart-controls.service.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed } from '@angular/core/testing';
 2 | 
 3 | import { ChartControlsService } from './chart-controls.service';
 4 | 
 5 | describe('ChartControlsService', () => {
 6 |   beforeEach(() => TestBed.configureTestingModule({}));
 7 | 
 8 |   it('should be created', () => {
 9 |     const service: ChartControlsService = TestBed.get(ChartControlsService);
10 |     expect(service).toBeTruthy();
11 |   });
12 | });
13 | 


--------------------------------------------------------------------------------
/src/app/chart-controls.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | 
 3 | @Injectable({
 4 |   providedIn: 'root'
 5 | })
 6 | export class ChartControlsService {
 7 | 
 8 |   showData = false;
 9 |   fullScreen = false;
10 |   constructor() { }
11 | }
12 | 


--------------------------------------------------------------------------------
/src/app/donut-chart/donut-chart.component.html:
--------------------------------------------------------------------------------
1 | <svg>
2 | 
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/src/app/donut-chart/donut-chart.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mpdroid/d3-in-angular/b80f5668a1e79aaca0df3ce59716ca0a6c6f4544/src/app/donut-chart/donut-chart.component.scss


--------------------------------------------------------------------------------
/src/app/donut-chart/donut-chart.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { DonutChartComponent } from './donut-chart.component';
 4 | 
 5 | describe('DonutChartComponent', () => {
 6 |   let component: DonutChartComponent;
 7 |   let fixture: ComponentFixture<DonutChartComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ DonutChartComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(DonutChartComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/app/donut-chart/donut-chart.component.ts:
--------------------------------------------------------------------------------
  1 | import { Component, OnInit, ElementRef, ViewEncapsulation, Input, SimpleChanges, OnChanges } from '@angular/core';
  2 | 
  3 | import * as d3 from 'd3';
  4 | 
  5 | export class DonutChartDatum {
  6 |     code: string;
  7 |     displayValue: string;
  8 |     count: number;
  9 | }
 10 | 
 11 | 
 12 | @Component({
 13 |     selector: 'app-donut-chart',
 14 |     encapsulation: ViewEncapsulation.None,
 15 |     templateUrl: './donut-chart.component.html',
 16 |     styleUrls: ['./donut-chart.component.scss']
 17 | })
 18 | export class DonutChartComponent implements OnInit, OnChanges {
 19 | 
 20 |     @Input() data: number[];
 21 |     hostElement; // Native element hosting the SVG container
 22 |     svg; // Top level SVG element
 23 |     g; // SVG Group element
 24 |     arc; // D3 Arc generator
 25 |     innerRadius; // Inner radius of donut chart
 26 |     radius; // Outer radius of donut chart
 27 |     slices; // Donut chart slice elements
 28 |     labels; // SVG data label elements
 29 |     totalLabel; // SVG label for total
 30 |     rawData; // Raw chart values array
 31 |     total: number; // Total of chart values
 32 |     colorScale; // D3 color provider
 33 |     pieData: any; // Arc segment parameters for current data set
 34 |     pieDataPrevious: any; // Arc segment parameters for previous data set - used for transitions
 35 |     colors = d3.scaleOrdinal(d3.schemeCategory10);
 36 | 
 37 |     // Pie function - transforms raw data to arc segment parameters
 38 |     pie = d3.pie()
 39 |         .startAngle(-0.5 * Math.PI)
 40 |         .endAngle(0.5 * Math.PI)
 41 |         .sort(null)
 42 |         .value((d: number) => d);
 43 | 
 44 |     constructor(private elRef: ElementRef) {
 45 |         this.hostElement = this.elRef.nativeElement;
 46 |     }
 47 | 
 48 |     ngOnInit() { }
 49 | 
 50 |     ngOnChanges(changes: SimpleChanges) {
 51 |         if (changes.data) {
 52 |             this.updateChart(changes.data.currentValue);
 53 |         }
 54 |     }
 55 | 
 56 |     private createChart(data: number[]) {
 57 | 
 58 |         this.processPieData(data);
 59 | 
 60 |         this.removeExistingChartFromParent();
 61 | 
 62 |         this.setChartDimensions();
 63 | 
 64 |         this.setColorScale();
 65 | 
 66 |         this.addGraphicsElement();
 67 | 
 68 |         this.setupArcGenerator();
 69 | 
 70 |         this.addSlicesToTheDonut();
 71 | 
 72 |         this.addLabelsToTheDonut();
 73 | 
 74 |         this.addDonutTotalLabel();
 75 |     }
 76 | 
 77 | 
 78 |     private setChartDimensions() {
 79 |         let viewBoxHeight = 100;
 80 |         let viewBoxWidth = 200;
 81 |         this.svg = d3.select(this.hostElement).append('svg')
 82 |             .attr('width', '100%')
 83 |             .attr('height', '100%')
 84 |             .attr('viewBox', '0 0 ' + viewBoxWidth + ' ' + viewBoxHeight);
 85 |     }
 86 | 
 87 |     private addGraphicsElement() {
 88 |         this.g = this.svg.append("g")
 89 |             .attr("transform", "translate(100,90)");
 90 |     }
 91 | 
 92 |     private setColorScale() {
 93 |         this.colorScale = d3.scaleOrdinal(d3.schemeCategory10);
 94 |         // Below is an example of using custom colors
 95 |         // this.colorScale = d3.scaleOrdinal().domain(["0","1","2","3"]).range(['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728']);
 96 |     }
 97 | 
 98 |     private processPieData(data, initial = true) {
 99 |         this.rawData = data;
100 |         this.total = this.rawData.reduce((sum, next) => sum + next, 0);
101 | 
102 |         this.pieData = this.pie(data);
103 |         if (initial) {
104 |             this.pieDataPrevious = this.pieData;
105 |         }
106 |     }
107 | 
108 | 
109 |     private setupArcGenerator() {
110 |         this.innerRadius = 50;
111 |         this.radius = 80;
112 |         this.arc = d3.arc()
113 |             .innerRadius(this.innerRadius)
114 |             .outerRadius(this.radius);
115 |     }
116 | 
117 |     private addSlicesToTheDonut() {
118 |         this.slices = this.g.selectAll('allSlices')
119 |             .data(this.pieData)
120 |             .enter()
121 |             .append('path')
122 |             .attr('d', this.arc)
123 |             .attr('fill', (datum, index) => {
124 |                 return this.colorScale(`${index}`);
125 |             })
126 |             .style('opacity', 1);
127 |     }
128 | 
129 |     private addDonutTotalLabel() {
130 |         this.totalLabel = this.svg
131 |             .append('text')
132 |             .text(this.total)
133 |             .attr('id', 'total')
134 |             .attr('x', 100)
135 |             .attr('y', 80)
136 |             .style('font-size', '10px')
137 |             .style('text-anchor', 'middle');
138 |     }
139 | 
140 |     // Creates an "interpolator" for animated transition for arc slices
141 |     //   given previous and new arc shapes,
142 |     //   generates a series of arc shapes (be)tween start and end state
143 |     arcTween = (datum, index) => {
144 |         const interpolation = d3.interpolate(this.pieDataPrevious[index], datum);
145 |         this.pieDataPrevious[index] = interpolation(0);
146 |         return (t) => {
147 |             return this.arc(interpolation(t));
148 |         }
149 |     }
150 | 
151 |     // Creates an "interpolator" for animated transition for arc labels
152 |     //   given previous and new label positions,
153 |     //   generates a series of arc states (be)tween start and end state
154 |     labelTween = (datum, index) => {
155 |         const interpolation = d3.interpolate(this.pieDataPrevious[index], datum);
156 |         this.pieDataPrevious[index] = interpolation(0);
157 |         return (t) => {
158 |             return 'translate(' + this.arc.centroid(interpolation(t)) + ')';
159 |         }
160 |     }
161 | 
162 |     public updateChart(data: number[]) {
163 |         if (!this.svg) {
164 |             this.createChart(data);
165 |             return;
166 |         }
167 | 
168 |         this.processPieData(data, false);
169 | 
170 |         this.updateSlices();
171 | 
172 |         this.updateLabels();
173 | 
174 |     }
175 | 
176 |     private updateSlices() {
177 |         this.slices = this.slices.data(this.pieData);
178 |         this.slices.transition().duration(750).attrTween("d", this.arcTween);
179 |     }
180 | 
181 |     private updateLabels() {
182 |         this.totalLabel.text(this.total);
183 |         this.labels.data(this.pieData);
184 |         this.labels.each((datum, index, n) => {
185 |             d3.select(n[index]).text(this.labelValueFn(this.rawData[index]));
186 |         });
187 |         this.labels.transition().duration(750).attrTween("transform", this.labelTween);
188 |     }
189 | 
190 |     private updateTotal() {
191 |         this.totalLabel.text(this.total);
192 |     }
193 | 
194 |     private removeExistingChartFromParent() {
195 |         // !!!!Caution!!!
196 |         // Make sure not to do;
197 |         //     d3.select('svg').remove();
198 |         // That will clear all other SVG elements in the DOM
199 |         d3.select(this.hostElement).select('svg').remove();
200 |     }
201 | 
202 |     private addLabelsToTheDonut() {
203 |         this.labels = this.g
204 |             .selectAll('allLabels')
205 |             .data(this.pieData)
206 |             .enter()
207 |             .append('text')
208 |             .text(this.labelValueGetter)
209 |             .attr('transform', (datum, index) => {
210 |                 return 'translate(' + this.arc.centroid(datum) + ')';
211 |             })
212 |             .style('font-size', '8px')
213 |             .style('text-anchor', 'middle');
214 | 
215 |     }
216 | 
217 |     private labelValueGetter = (datum, index) => {
218 |         return this.labelValueFn(this.rawData[index]);
219 |     }
220 | 
221 |     private labelValueFn(val) {
222 |         const pct = Math.floor(val * 100 / this.total);
223 |         return (pct < 4) ? '' : '' + val;
224 |     }
225 | }
226 | 


--------------------------------------------------------------------------------
/src/app/fm/flash-mob.component.html:
--------------------------------------------------------------------------------
 1 | <div class="container">
 2 |     <app-area-chart #areaChart [data]="chartData" [transitionTime]="transitionTime"
 3 |     xmax="90"
 4 |     ymax="150"
 5 |     hticks="80"
 6 |     showLabel="0"
 7 |     ></app-area-chart>
 8 | </div>
 9 | <audio  #audio crossorigin="anonymous">
10 |     <source src="assets/xlf.m4a" type="audio/mpeg">
11 |         Your browser does not support the audio element.
12 | </audio>
13 | 


--------------------------------------------------------------------------------
/src/app/fm/flash-mob.component.scss:
--------------------------------------------------------------------------------
 1 | :host {
 2 |   display: flex;
 3 |   justify-content: space-evenly;
 4 |   align-items: center;
 5 | }
 6 | 
 7 | .container {
 8 |   display: flex;
 9 |   // background-color: #EAFAF1;
10 |   justify-content: center;
11 |   align-items: center;
12 |   height: 100vh;
13 |   width: 100vw;
14 |   app-area-chart {
15 |     display: flex;
16 |     justify-content: center;
17 |     align-items: center;
18 |     height: 100%;
19 |     width: 100%;
20 |   }
21 | }
22 | #audio {
23 |     position: absolute;
24 |     top: 1rem;
25 |     right: 1rem;
26 | }


--------------------------------------------------------------------------------
/src/app/fm/flash-mob.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { FlashMobComponent } from './flash-mob.component';
 4 | 
 5 | describe('FlashMobComponent', () => {
 6 |   let component: FlashMobComponent;
 7 |   let fixture: ComponentFixture<FlashMobComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ FlashMobComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(FlashMobComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/app/fm/flash-mob.component.ts:
--------------------------------------------------------------------------------
  1 | import { Component, OnInit, OnDestroy, AfterContentInit, ElementRef, isDevMode } from '@angular/core';
  2 | import { Router } from '@angular/router';
  3 | import { ViewChild } from '@angular/core';
  4 | import * as d3  from 'd3';
  5 | 
  6 | import { AreaChartComponent } from './../area-chart/area-chart.component';
  7 | import { ChartControlsService } from '../chart-controls.service';
  8 | import { DeliveryMetric } from '../order-delivery/order-delivery.component';
  9 | import { IWindow } from '../app.component';
 10 | 
 11 | @Component({
 12 |   selector: 'app-flash-mob',
 13 |   templateUrl: './flash-mob.component.html',
 14 |   styleUrls: ['./flash-mob.component.scss']
 15 | })
 16 | export class FlashMobComponent implements OnInit, OnDestroy, AfterContentInit {
 17 |   @ViewChild('areaChart', { static: true }) chart: AreaChartComponent;
 18 |   @ViewChild('audio', { static: true }) audio: ElementRef;
 19 | 
 20 |   chartData = [];
 21 | 
 22 |   transitionTime = 200;
 23 |   refreshInterval;
 24 |   driftInterval;
 25 | 
 26 |   audioContext;
 27 |   analyzer;
 28 |   dataArray;
 29 | 
 30 |   N = 5;
 31 |   means = [15,30,45,60,75];
 32 |   drifts = [0.1,-.1,0,.1,-.1 ];
 33 | 
 34 | 
 35 |   constructor(private chartControlsService: ChartControlsService) {
 36 |       this.chartControlsService.fullScreen = true;
 37 |    }
 38 | 
 39 |   ngOnInit() {  }
 40 | 
 41 |   initialize() {
 42 | 
 43 |     const audioContext = new AudioContext();
 44 |     const audioSrc = audioContext.createMediaElementSource(this.audio.nativeElement);
 45 |     this.analyzer = audioContext.createAnalyser();
 46 |     const bufferLength = this.analyzer.frequencyBinCount;
 47 |     this.dataArray = new Uint8Array(bufferLength);
 48 |     audioSrc.connect(this.analyzer);
 49 |     audioSrc.connect(audioContext.destination);
 50 |     this.analyzer.getByteFrequencyData(this.dataArray);
 51 | 
 52 | 
 53 |     if (this.refreshInterval) {
 54 |       clearInterval(this.refreshInterval);
 55 |     }
 56 |     this.generateData();
 57 |     this.chart.data = [...this.chartData];
 58 |     this.audio.nativeElement.play();
 59 |     this.refreshInterval = setInterval(() => {
 60 |       if(document.hasFocus()) {
 61 |         this.generateData();
 62 |         this.chart.data = [...this.chartData];  
 63 |       }
 64 |     }, this.transitionTime);
 65 |    this.drift();
 66 | 
 67 |   }
 68 | 
 69 |   ngOnDestroy() {
 70 |     if (this.refreshInterval) {
 71 |       clearInterval(this.refreshInterval);
 72 |     }
 73 |     if (this.driftInterval) {
 74 |       clearInterval(this.driftInterval);
 75 |     }
 76 |   }
 77 | 
 78 |   ngAfterContentInit() {
 79 |     this.initialize();
 80 |   }
 81 | 
 82 |   drift() {
 83 |     this.driftInterval = setInterval(() => {
 84 |        for (let i = 0; i < this.N; i++) {
 85 |          this.drifts[i] = -this.drifts[i];
 86 |        }
 87 |     }, 160 * this.transitionTime);
 88 | 
 89 |   }
 90 |   generateData() {
 91 |     this.chartData = [];
 92 |     let mf = 1.0;
 93 |     if (this.analyzer) {
 94 | 
 95 |       this.analyzer.getByteFrequencyData(this.dataArray);
 96 |       mf = 200.0 / d3.mean(this.dataArray) ;
 97 |     }
 98 | 
 99 |     const sigma = mf * randomInt(2, 2) ;
100 |     for( let i = 0; i < this.N;i++) {
101 |       this.means[i] += this.drifts[i];
102 |       const randomizer = d3.randomNormal(this.means[i], sigma);
103 |       const times = [];
104 |       for (let i = 0; i < 1000; i++) {
105 |         times.push(Math.floor(randomizer()));
106 |       }
107 |       this.chartData.push(times);
108 |     }
109 | 
110 | 
111 | 
112 |     // this.chartData.push(ptimes);
113 |     // this.chartData.push(qtimes);
114 |     // this.chartData.push(rtimes);
115 |     // this.chartData.push(stimes);
116 |     // this.chartData.push(ttimes);
117 |   }
118 | 
119 | }
120 | 
121 | export function randomInt(min, max) {
122 |   return Math.floor(Math.random() * (max - min + 1)) + min;
123 | }
124 | 
125 | 


--------------------------------------------------------------------------------
/src/app/order-delivery/order-delivery.component.html:
--------------------------------------------------------------------------------
 1 | <mat-card class="container">
 2 |     <mat-card-title class="title">
 3 |         <mat-icon (click)="navigateLeft()" class="left">keyboard_arrow_left</mat-icon>
 4 |         <div>Order Delivery Time</div>
 5 |         <mat-icon (click)="navigateRight()" class="right">keyboard_arrow_right</mat-icon>
 6 |     </mat-card-title>
 7 |     <mat-card-content id="delivery" #delivery>
 8 |         <div id="chartAndDataContainer">
 9 |             <div id="chartContainer" [ngClass]="{'half': chartControlsService.showData}">
10 |                 <app-area-chart #areaChart [data]="chartData"></app-area-chart>
11 |             </div>
12 |             <div id="deliveryTable"  *ngIf="chartControlsService.showData">
13 |                 <table mat-table [dataSource]="deliveryMetrics"
14 |                        *ngIf="deliveryMetrics"
15 |                        class="mat-elevation-z8">
16 |                     <ng-container matColumnDef="legend">
17 |                         <th mat-header-cell *matHeaderCellDef></th>
18 |                         <td mat-cell *matCellDef="let element" [ngClass]="element.state">&#9632;</td>
19 |                     </ng-container>
20 |                     <ng-container matColumnDef="stateDisplayValue">
21 |                         <th mat-header-cell *matHeaderCellDef>Order State</th>
22 |                         <td mat-cell *matCellDef="let element">{{element.stateDisplayValue}}</td>
23 |                     </ng-container>
24 |                     <ng-container matColumnDef="mean">
25 |                         <th mat-header-cell *matHeaderCellDef>Mean (min)</th>
26 |                         <td mat-cell *matCellDef="let element">{{element.mean}}</td>
27 |                     </ng-container>
28 |                     <ng-container matColumnDef="stdDev">
29 |                         <th mat-header-cell *matHeaderCellDef>Std. Dev.</th>
30 |                         <td mat-cell *matCellDef="let element">{{element.stdDev}}</td>
31 |                     </ng-container>
32 |                     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
33 |                     <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="table-row"></tr>
34 |                 </table>
35 |             </div>
36 |         </div>
37 |         <mat-slide-toggle class="show-data" color="primary" 
38 |             [checked]="chartControlsService.showData"
39 |             (change)="toggleData($event)">
40 |             Show data
41 |         </mat-slide-toggle>
42 |     </mat-card-content>
43 | </mat-card>
44 | 


--------------------------------------------------------------------------------
/src/app/order-delivery/order-delivery.component.scss:
--------------------------------------------------------------------------------
  1 | :host {
  2 |     display: flex;
  3 |     justify-content: space-evenly;
  4 |     align-items: center;
  5 | }
  6 | 
  7 | .container {
  8 |     min-width: 350px;
  9 |     width: 60vw;
 10 |     display: flex;
 11 |     flex-direction: column;
 12 |     justify-content: space-evenly;
 13 |     background-color: transparent;
 14 |     .title {
 15 |         display: flex;
 16 |         flex-direction: row;
 17 |         justify-content: space-between;
 18 |         align-items: center;
 19 |         font-size: 2rem;
 20 |         font-family: 'Roboto';
 21 |         height: 2rem;
 22 |         width: 100%;
 23 |         margin: 0 auto 1rem auto;
 24 | 
 25 |         .left {
 26 |             height: 3rem;
 27 |             font-size: 3rem;
 28 |             cursor: pointer;
 29 |         }
 30 |         .span {
 31 |             height: 3rem;
 32 |             line-height: 3rem;
 33 |         }
 34 |         .right {
 35 |             height: 3rem;
 36 |             font-size: 3rem;
 37 |             cursor: pointer;
 38 |             margin-right: 20px;
 39 |         }
 40 |     }
 41 | 
 42 |     #delivery {
 43 |         height: 70vh;
 44 |         min-height: 400px;
 45 |         display: flex;
 46 |         flex-direction: column;
 47 |         justify-content: space-between;
 48 |         align-items: center;
 49 |         width: 100%;
 50 |         position: relative;
 51 | 
 52 |         mat-select {
 53 |             position: absolute;
 54 |             top: 0;
 55 |             right: 0px;
 56 |             width: 20%;
 57 |             padding: 5px;
 58 |             font-size: 1rem;
 59 |             font-family: 'Roboto';
 60 |             z-index: 100;
 61 |         }
 62 | 
 63 |         #chartAndDataContainer {
 64 |             position: relative;
 65 |             display: flex;
 66 |             flex-direction: column;
 67 |             align-items: center;
 68 |             background-color: transparent;
 69 |             height: 100%;
 70 |             width: 100%;
 71 |             #chartContainer {
 72 |                 display: flex;
 73 |                 // background-color: #EAFAF1;
 74 |                 justify-content: center;
 75 |                 align-items: center;
 76 |                 height: 100%;
 77 |                 width: 100%;
 78 |                 app-area-chart {
 79 |                     display: flex;
 80 |                     justify-content: center;
 81 |                     align-items: center;
 82 |                     height: 100%;
 83 |                     width: 100%;
 84 |                 }
 85 |             }
 86 |             .half {
 87 |                 height: 50%;
 88 |             }
 89 |             #deliveryTable {
 90 |                 margin-top: 20px;
 91 |                 display: flex;
 92 |                 height: 50%;
 93 |                 width: 100%;
 94 |                 max-width: 400px;
 95 |                 table {
 96 |                   width: 100%;
 97 |                   .preparing {
 98 |                     color: #1f77b4;
 99 |                     font-size: 2rem;
100 |                   }
101 |                   .ready {
102 |                     color: #ff7f0e;
103 |                     font-size: 2rem;
104 |                   }
105 |                   .inTransit {
106 |                     color: #2ca02c;
107 |                     font-size: 2rem;
108 |                   }
109 |                   .delivered {
110 |                     color: #d62728;
111 |                     font-size: 2rem;
112 |                   }
113 |                   .mat-column-legend {
114 |                     width: 20%;
115 |                   }
116 |                   tr.mat-header-row {
117 |                     height: 48px !important;
118 |                   }
119 |                   tr.table-row {
120 |                     height: 20px !important;
121 |                   }
122 |                 }
123 |             }
124 |         }
125 |     }
126 | }
127 | 
128 | 
129 | .show-data {
130 |     position: absolute;
131 |     top: 1rem;
132 |     right: 1rem;
133 | }
134 | 
135 | 
136 | mat-option ::ng-deep .city {
137 |     font-size: 1rem;
138 |     font-family: 'Roboto';
139 | }
140 | 
141 | @media screen and (max-width: 767px) {
142 |     .container {
143 |         .title {
144 |             font-size: 1.5rem;
145 |         }
146 |     }
147 | }
148 | 
149 | @media screen and (max-width: 414px) {
150 |     .container {
151 |         .title {
152 |             font-size: 1rem;
153 |         }
154 |     }
155 | }
156 | 


--------------------------------------------------------------------------------
/src/app/order-delivery/order-delivery.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { OrderDeliveryComponent } from './order-delivery.component';
 4 | 
 5 | describe('OrderDeliveryComponent', () => {
 6 |   let component: OrderDeliveryComponent;
 7 |   let fixture: ComponentFixture<OrderDeliveryComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ OrderDeliveryComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(OrderDeliveryComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/app/order-delivery/order-delivery.component.ts:
--------------------------------------------------------------------------------
  1 | import { Component, OnInit, OnDestroy, AfterContentInit, ElementRef } from '@angular/core';
  2 | import { Router } from '@angular/router';
  3 | import { ViewChild } from '@angular/core';
  4 | import * as d3 from 'd3';
  5 | 
  6 | import { AreaChartComponent } from './../area-chart/area-chart.component';
  7 | import { ChartControlsService } from '../chart-controls.service';
  8 | 
  9 | export class DeliveryMetric {
 10 |   state: string;
 11 |   stateDisplayValue: string;
 12 |   mean: number;
 13 |   stdDev: number;
 14 | 
 15 |   constructor(stateIn, stateDisplayValueIn, meanIn, stdDevIn) {
 16 |     this.state = stateIn;
 17 |     this.stateDisplayValue = stateDisplayValueIn;
 18 |     this.mean = meanIn;
 19 |     this.stdDev = stdDevIn;
 20 |   }
 21 | }
 22 | 
 23 | 
 24 | @Component({
 25 |   selector: 'app-order-delivery',
 26 |   templateUrl: './order-delivery.component.html',
 27 |   styleUrls: ['./order-delivery.component.scss']
 28 | })
 29 | export class OrderDeliveryComponent implements OnInit, OnDestroy, AfterContentInit {
 30 | 
 31 |   @ViewChild('areaChart', { static: true }) chart: AreaChartComponent;
 32 | 
 33 |   chartData = [];
 34 | 
 35 |   refreshInterval;
 36 | 
 37 |   deliveryMetrics: DeliveryMetric[];
 38 | 
 39 |   displayedColumns = ['legend', 'stateDisplayValue', 'mean', 'stdDev'];
 40 | 
 41 |   constructor(private router: Router, public chartControlsService: ChartControlsService) {
 42 |     this.chartControlsService.fullScreen = false;
 43 |    }
 44 | 
 45 |   ngOnInit() {
 46 |   }
 47 | 
 48 |   initialize() {
 49 |     if (this.refreshInterval) {
 50 |       clearInterval(this.refreshInterval);
 51 |     }
 52 |     this.generateData();
 53 |     this.chart.data = [...this.chartData];
 54 |     this.refreshInterval = setInterval(() => {
 55 |       if(document.hasFocus()) {
 56 |         this.generateData();
 57 |         this.chart.data = [...this.chartData];  
 58 |       }
 59 |     }, 1000);
 60 | 
 61 |   }
 62 | 
 63 |   ngOnDestroy() {
 64 |     if (this.refreshInterval) {
 65 |       clearInterval(this.refreshInterval);
 66 |     }
 67 |   }
 68 | 
 69 |   ngAfterContentInit() {
 70 |     this.initialize();
 71 |   }
 72 | 
 73 |   generateData() {
 74 |     this.chartData = [];
 75 |     this.deliveryMetrics = [];
 76 |     const meanPrepTime = randomInt(10, 11);
 77 |     const meanWaitTime = randomInt(8, 9);
 78 |     const meanTransitTime = randomInt(9, 10);
 79 | 
 80 |     const meanTotalTime = meanPrepTime + meanWaitTime + meanTransitTime;
 81 | 
 82 |     const sigmaPrepTime = randomInt(1, 1);
 83 |     const sigmaWaitTime = randomInt(2, 3);
 84 |     const sigmaTransitTime = randomInt(1, 2);
 85 | 
 86 |     const sigmaTotalTime = Math.floor(
 87 |       Math.sqrt(Math.pow(sigmaPrepTime, 2) +
 88 |         Math.pow(sigmaWaitTime, 2) +
 89 |         Math.pow(sigmaTransitTime, 2))
 90 |     );
 91 | 
 92 |     this.deliveryMetrics.push(new DeliveryMetric(
 93 |       'preparing',
 94 |       'Preparation',
 95 |       meanPrepTime,
 96 |       sigmaPrepTime
 97 |     ));
 98 |     this.deliveryMetrics.push(new DeliveryMetric(
 99 |       'ready',
100 |       'Waiting',
101 |       meanWaitTime,
102 |       sigmaWaitTime
103 |     ));
104 |     this.deliveryMetrics.push(new DeliveryMetric(
105 |       'inTransit',
106 |       'In Transit',
107 |       meanTransitTime,
108 |       sigmaTransitTime
109 |     ));
110 |     this.deliveryMetrics.push(new DeliveryMetric(
111 |       'delivered',
112 |       'Total delivery',
113 |       meanTotalTime,
114 |       sigmaTotalTime
115 |     ));
116 | 
117 |     let prandomizer = d3.randomNormal(meanPrepTime, sigmaPrepTime);
118 |     let wrandomizer = d3.randomNormal(meanWaitTime, sigmaWaitTime);
119 |     let trandomizer = d3.randomNormal(meanTransitTime, sigmaTransitTime);
120 | 
121 |     const ptimes = [];
122 |     const wtimes = [];
123 |     const ttimes = [];
124 |     const totaltimes = [];
125 |     for (let i = 0; i < 500; i++) {
126 |       const p = Math.floor(prandomizer());
127 |       const w = Math.floor(wrandomizer());
128 |       const t = Math.floor(trandomizer());
129 |       const total = p + w + t;
130 |       ptimes.push(p);
131 |       wtimes.push(w);
132 |       ttimes.push(t);
133 |       totaltimes.push(total);
134 |     }
135 |     this.chartData.push(ptimes);
136 |     this.chartData.push(wtimes);
137 |     this.chartData.push(ttimes);
138 |     this.chartData.push(totaltimes);
139 |   }
140 | 
141 |   navigateRight() {
142 |     this.router.navigate(['/status']);
143 |   }
144 | 
145 |   navigateLeft() {
146 |     this.router.navigate(['/status']);
147 |   }
148 | 
149 |   toggleData(event) {
150 |     this.chartControlsService.showData = event.checked;
151 |   }
152 | }
153 | 
154 | export function randomInt(min, max) {
155 |   return Math.floor(Math.random() * (max - min + 1)) + min;
156 | }
157 | 


--------------------------------------------------------------------------------
/src/app/order-status/hobbiton.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "city": "shining-on-the-hill",
 3 |   "orderStates": [
 4 |     {
 5 |       "state": "preparing",
 6 |       "stateDisplayValue": "Preparing",
 7 |       "count": 10
 8 |     },
 9 |     {
10 |       "state": "ready",
11 |       "stateDisplayValue": "Ready",
12 |       "count": 10
13 |     },
14 |     {
15 |       "state": "inTransit",
16 |       "stateDisplayValue": "Out for delivery",
17 |       "count": 10
18 |     },
19 |     {
20 |       "state": "delivered",
21 |       "stateDisplayValue": "Delivered",
22 |       "count": 10
23 |     }
24 |   ]
25 | }
26 | 


--------------------------------------------------------------------------------
/src/app/order-status/order-status.component.html:
--------------------------------------------------------------------------------
 1 | <mat-card class="container">
 2 |     <mat-card-title class="title">
 3 |         <mat-icon (click)="navigateLeft()" class="left">keyboard_arrow_left</mat-icon>
 4 |         <div>Orders By Status</div>
 5 |         <mat-icon (click)="navigateRight()" class="right">keyboard_arrow_right</mat-icon>
 6 |     </mat-card-title>
 7 |     <mat-card-content id="ordersByStatus" #ordersByStatus>
 8 |         <div id="chartAndDataContainer">
 9 |             <div id="chartContainer" [ngClass]="{'half': chartControlsService.showData}">
10 |                 <app-donut-chart #ordersByStatusChart [data]="chartData"></app-donut-chart>
11 |             </div>
12 |             <div id="ordersByStatusTable" *ngIf="chartControlsService.showData">
13 |                 <table mat-table [dataSource]="orderStates" *ngIf="orderStates" class="mat-elevation-z8">
14 |                     <ng-container matColumnDef="legend">
15 |                         <th mat-header-cell *matHeaderCellDef></th>
16 |                         <td mat-cell *matCellDef="let element" [ngClass]="element.state">&#9632;</td>
17 |                     </ng-container>
18 |                     <ng-container matColumnDef="orderStatus">
19 |                         <th mat-header-cell *matHeaderCellDef>Order Status</th>
20 |                         <td mat-cell *matCellDef="let element">{{element.stateDisplayValue}}</td>
21 |                     </ng-container>
22 |                     <ng-container matColumnDef="total">
23 |                         <th mat-header-cell *matHeaderCellDef>Total</th>
24 |                         <td mat-cell *matCellDef="let element">{{element.count}}</td>
25 |                     </ng-container>
26 |                     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
27 |                     <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="table-row"></tr>
28 |                 </table>
29 |             </div>
30 |         </div>
31 |         <mat-slide-toggle class="show-data" color="primary" 
32 |             [checked]="chartControlsService.showData"
33 |             (change)="toggleData($event)">
34 |             Show data
35 |         </mat-slide-toggle>
36 |     </mat-card-content>
37 | </mat-card>


--------------------------------------------------------------------------------
/src/app/order-status/order-status.component.scss:
--------------------------------------------------------------------------------
  1 | :host {
  2 |     display: flex;
  3 |     justify-content: space-evenly;
  4 |     align-items: center;
  5 | }
  6 | 
  7 | .container {
  8 |     min-width: 350px;
  9 |     width: 60vw;
 10 |     display: flex;
 11 |     flex-direction: column;
 12 |     justify-content: space-evenly;
 13 |     background-color: transparent;
 14 |     .title {
 15 |         display: flex;
 16 |         flex-direction: row;
 17 |         justify-content: space-between;
 18 |         align-items: center;
 19 |         font-size: 2rem;
 20 |         font-family: 'Roboto';
 21 |         height: 2rem;
 22 |         width: 100%;
 23 |         margin: 0 auto 1rem auto;
 24 | 
 25 |         .left {
 26 |             height: 3rem;
 27 |             font-size: 3rem;
 28 |             cursor: pointer;
 29 |         }
 30 |         .span {
 31 |             height: 3rem;
 32 |             line-height: 3rem;
 33 |         }
 34 |         .right {
 35 |             height: 3rem;
 36 |             font-size: 3rem;
 37 |             cursor: pointer;
 38 |             margin-right: 20px;
 39 |         }
 40 |     }
 41 | 
 42 |     #ordersByStatus {
 43 |         height: 70vh;
 44 |         min-height: 400px;
 45 |         display: flex;
 46 |         flex-direction: column;
 47 |         justify-content: space-between;
 48 |         align-items: center;
 49 |         width: 100%;
 50 |         position: relative;
 51 | 
 52 |         mat-select {
 53 |             position: absolute;
 54 |             top: 0;
 55 |             right: 0px;
 56 |             width: 20%;
 57 |             padding: 5px;
 58 |             font-size: 1rem;
 59 |             font-family: 'Roboto';
 60 |             z-index: 100;
 61 |         }
 62 | 
 63 |         #chartAndDataContainer {
 64 |             position: relative;
 65 |             display: flex;
 66 |             flex-direction: column;
 67 |             align-items: center;
 68 |             background-color: transparent;
 69 |             height: 100%;
 70 |             width: 100%;
 71 |             #chartContainer {
 72 |                 display: flex;
 73 |                 justify-content: center;
 74 |                 align-items: center;
 75 |                 flex: 1;
 76 |                 height: 100%;
 77 |                 width: 100%;
 78 |                 app-donut-chart {
 79 |                     display: flex;
 80 |                     justify-content: center;
 81 |                     align-items: center;
 82 |                     height: 100%;
 83 |                     width: 100%;
 84 |                 }
 85 |             }
 86 |             .half {
 87 |                 height: 50%;
 88 |             }
 89 |             #ordersByStatusTable {
 90 |                 display: flex;
 91 |                 height: 50%;
 92 |                 width: 100%;
 93 |                 max-width: 400px;
 94 |                 table {
 95 |                   width: 100%;
 96 |                   .preparing {
 97 |                     color: #1f77b4;
 98 |                     font-size: 2rem;
 99 |                   }
100 |                   .ready {
101 |                     color: #ff7f0e;
102 |                     font-size: 2rem;
103 |                   }
104 |                   .inTransit {
105 |                     color: #2ca02c;
106 |                     font-size: 2rem;
107 |                   }
108 |                   .delivered {
109 |                     color: #d62728;
110 |                     font-size: 2rem;
111 |                   }
112 |                   .mat-column-legend {
113 |                     width: 20%;
114 |                   }
115 |                   tr.mat-header-row {
116 |                     height: 48px !important;
117 |                   }
118 |                   .table-row {
119 |                     height: 20px !important;
120 |                   }
121 |                 }
122 |             }
123 |         }
124 |     }
125 | }
126 | 
127 | .show-data {
128 |     position: absolute;
129 |     top: 1rem;
130 |     right: 1rem;
131 | }
132 | 
133 | mat-option ::ng-deep .city {
134 |     font-size: 1rem;
135 |     font-family: 'Roboto';
136 | }
137 | 
138 | @media screen and (max-width: 767px) {
139 |     .container {
140 |         .title {
141 |             font-size: 1.5rem;
142 |         }
143 |     }
144 | }
145 | 
146 | @media screen and (max-width: 414px) {
147 |     .container {
148 |         .title {
149 |             font-size: 1rem;
150 |         }
151 |     }
152 | }
153 | 


--------------------------------------------------------------------------------
/src/app/order-status/order-status.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { OrderStatusComponent } from './order-status.component';
 4 | 
 5 | describe('OrderStatusComponent', () => {
 6 |   let component: OrderStatusComponent;
 7 |   let fixture: ComponentFixture<OrderStatusComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ OrderStatusComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(OrderStatusComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/app/order-status/order-status.component.ts:
--------------------------------------------------------------------------------
  1 | import { Component, OnInit, OnDestroy, AfterContentInit, ElementRef } from '@angular/core';
  2 | import { Router } from '@angular/router';
  3 | 
  4 | import { ViewChild } from '@angular/core';
  5 | 
  6 | import { DonutChartComponent } from './../donut-chart/donut-chart.component';
  7 | 
  8 | import * as HOBBITON from './hobbiton.json';
  9 | import { ChartControlsService } from '../chart-controls.service';
 10 | import { MatSlideToggleChange } from '@angular/material/slide-toggle';
 11 | 
 12 | export class OrderState {
 13 |   state: string;
 14 |   stateDisplayValue: string;
 15 |   count: number;
 16 | }
 17 | 
 18 | 
 19 | @Component({
 20 |   selector: 'app-order-status',
 21 |   templateUrl: './order-status.component.html',
 22 |   styleUrls: ['./order-status.component.scss']
 23 | })
 24 | export class OrderStatusComponent implements OnInit, OnDestroy, AfterContentInit {
 25 | 
 26 |   @ViewChild('ordersByStatusChart', { static: true }) chart: DonutChartComponent;
 27 | 
 28 |   orderStates: OrderState[];
 29 | 
 30 |   chartData: number[] = [];
 31 | 
 32 |   displayedColumns = ['legend', 'orderStatus', 'total'];
 33 | 
 34 |   refreshInterval;
 35 | 
 36 |   constructor(private router: Router, public chartControlsService: ChartControlsService) { 
 37 |     this.chartControlsService.fullScreen = false;
 38 | 
 39 |   }
 40 | 
 41 |   ngOnInit() {
 42 |   }
 43 | 
 44 |   initialize() {
 45 |     if (this.refreshInterval) {
 46 |       clearInterval(this.refreshInterval);
 47 |     }
 48 |     this.generateData();
 49 |     this.chart.data = [...this.chartData];
 50 |     this.refreshInterval = setInterval(() => {
 51 |       if (document.hasFocus()) {
 52 |         this.updateStates();
 53 |         this.chart.data = [...this.chartData];
 54 |       }
 55 |     }, 1000);
 56 | 
 57 |   }
 58 | 
 59 |   ngOnDestroy() {
 60 |     if (this.refreshInterval) {
 61 |       clearInterval(this.refreshInterval);
 62 |     }
 63 |   }
 64 | 
 65 |   ngAfterContentInit() {
 66 |     this.initialize();
 67 |   }
 68 | 
 69 |   generateData() {
 70 |     this.orderStates = [];
 71 |     HOBBITON.orderStates.forEach((state) => {
 72 |       const target = new OrderState();
 73 |       target.state = state.state;
 74 |       target.stateDisplayValue = state.stateDisplayValue;
 75 |       target.count = randomInt(0, 100);
 76 |       this.orderStates.push(target);
 77 |     });
 78 |     this.chartData = [];
 79 |     this.orderStates.forEach((state) => {
 80 |       this.chartData.push(state.count);
 81 |     });
 82 |   }
 83 | 
 84 |   updateStates() {
 85 |     const increment = (val, plus, minus) => {
 86 |       return val + plus - minus;
 87 |     }
 88 |     const newOrders = randomInt(0, 10);
 89 |     const newReady = randomInt(0, Math.min(10, this.orderStates[0].count));
 90 |     const newTransit = randomInt(0, Math.min(10, this.orderStates[1].count));
 91 |     const newDelivered = randomInt(0, Math.min(10, this.orderStates[2].count));
 92 |     this.orderStates[0].count = increment(this.orderStates[0].count, newOrders, newReady);
 93 |     this.orderStates[1].count = increment(this.orderStates[1].count, newReady, newTransit);
 94 |     this.orderStates[2].count = increment(this.orderStates[2].count, newTransit, newDelivered);
 95 |     this.orderStates[3].count = increment(this.orderStates[3].count, newDelivered, 0);
 96 |     this.chartData = [];
 97 |     this.orderStates.forEach((state) => {
 98 |       this.chartData.push(state.count);
 99 |     });
100 |   }
101 | 
102 |   navigateLeft() {
103 |     this.router.navigate(['/delivery']);
104 |   }
105 | 
106 |   navigateRight() {
107 |     this.router.navigate(['/delivery']);
108 |   }
109 | 
110 |   toggleData(event: MatSlideToggleChange) {
111 |     this.chartControlsService.showData = event.checked;
112 |   }
113 | }
114 | 
115 | export function randomInt(min, max) {
116 |   return Math.floor(Math.random() * (max - min + 1)) + min;
117 | }
118 | 


--------------------------------------------------------------------------------
/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mpdroid/d3-in-angular/b80f5668a1e79aaca0df3ce59716ca0a6c6f4544/src/assets/.gitkeep


--------------------------------------------------------------------------------
/src/assets/pizza.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mpdroid/d3-in-angular/b80f5668a1e79aaca0df3ce59716ca0a6c6f4544/src/assets/pizza.png


--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
 1 | // This file can be replaced during build by using the `fileReplacements` array.
 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
 3 | // The list of file replacements can be found in `angular.json`.
 4 | 
 5 | export const environment = {
 6 |   production: false
 7 | };
 8 | 
 9 | /*
10 |  * For easier debugging in development mode, you can import the following file
11 |  * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 |  *
13 |  * This import should be commented out in production mode because it will have a negative impact
14 |  * on performance if an error is thrown.
15 |  */
16 | // import 'zone.js/dist/zone-error';  // Included with Angular CLI.
17 | 


--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mpdroid/d3-in-angular/b80f5668a1e79aaca0df3ce59716ca0a6c6f4544/src/favicon.ico


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <title>D3 in Angular 8</title>
 6 |     <base href="/">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <link rel="icon" type="image/x-icon" href="favicon.ico">
 9 |     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
10 |     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
11 |     <link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah&display=swap" rel="stylesheet">
12 | </head>
13 | <body>
14 | <app-root></app-root>
15 | </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import 'hammerjs';
 2 | import { enableProdMode } from '@angular/core';
 3 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 4 | 
 5 | import { AppModule } from './app/app.module';
 6 | import { environment } from './environments/environment';
 7 | 
 8 | if (environment.production) {
 9 |   enableProdMode();
10 | }
11 | 
12 | platformBrowserDynamic().bootstrapModule(AppModule)
13 |   .catch(err => console.error(err));
14 | 


--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file includes polyfills needed by Angular and is loaded before the app.
 3 |  * You can add your own extra polyfills to this file.
 4 |  *
 5 |  * This file is divided into 2 sections:
 6 |  *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 7 |  *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 8 |  *      file.
 9 |  *
10 |  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 |  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 |  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 |  *
14 |  * Learn more in https://angular.io/guide/browser-support
15 |  */
16 | 
17 | /***************************************************************************************************
18 |  * BROWSER POLYFILLS
19 |  */
20 | 
21 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
22 | // import 'classlist.js';  // Run `npm install --save classlist.js`.
23 | 
24 | /**
25 |  * Web Animations `@angular/platform-browser/animations`
26 |  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
27 |  * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
28 |  */
29 | // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
30 | 
31 | /**
32 |  * By default, zone.js will patch all possible macroTask and DomEvents
33 |  * user can disable parts of macroTask/DomEvents patch by setting following flags
34 |  * because those flags need to be set before `zone.js` being loaded, and webpack
35 |  * will put import in the top of bundle, so user need to create a separate file
36 |  * in this directory (for example: zone-flags.ts), and put the following flags
37 |  * into that file, and then add the following code before importing zone.js.
38 |  * import './zone-flags.ts';
39 |  *
40 |  * The flags allowed in zone-flags.ts are listed here.
41 |  *
42 |  * The following flags will work for all browsers.
43 |  *
44 |  * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
45 |  * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
46 |  * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
47 |  *
48 |  *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
49 |  *  with the following flag, it will bypass `zone.js` patch for IE/Edge
50 |  *
51 |  *  (window as any).__Zone_enable_cross_context_check = true;
52 |  *
53 |  */
54 | 
55 | /***************************************************************************************************
56 |  * Zone JS is required by default for Angular itself.
57 |  */
58 | import 'zone.js/dist/zone';  // Included with Angular CLI.
59 | 
60 | 
61 | /***************************************************************************************************
62 |  * APPLICATION IMPORTS
63 |  */
64 | 


--------------------------------------------------------------------------------
/src/styles.scss:
--------------------------------------------------------------------------------
 1 | 
 2 | // Custom Theming for Angular Material
 3 | // For more information: https://material.angular.io/guide/theming
 4 | @import '~@angular/material/theming';
 5 | // Plus imports for other components in your app.
 6 | 
 7 | // Include the common styles for Angular Material. We include this here so that you only
 8 | // have to load a single css file for Angular Material in your app.
 9 | // Be sure that you only ever include this mixin once!
10 | @include mat-core();
11 | 
12 | // Define the palettes for your theme using the Material Design palettes available in palette.scss
13 | // (imported above). For each palette, you can optionally specify a default, lighter, and darker
14 | // hue. Available color palettes: https://material.io/design/color/
15 | $d3-in-angular-primary: mat-palette($mat-indigo);
16 | $d3-in-angular-accent: mat-palette($mat-pink, A200, A100, A400);
17 | 
18 | // The warn palette is optional (defaults to red).
19 | $d3-in-angular-warn: mat-palette($mat-red);
20 | 
21 | // Create the theme object (a Sass map containing all of the palettes).
22 | $d3-in-angular-theme: mat-light-theme($d3-in-angular-primary, $d3-in-angular-accent, $d3-in-angular-warn);
23 | 
24 | // Include theme styles for core and each component used in your app.
25 | // Alternatively, you can import and @include the theme mixins for each component
26 | // that you are using.
27 | @include angular-material-theme($d3-in-angular-theme);
28 | 
29 | /* You can add global styles to this file, and also import other style files */
30 | 
31 | html, body { height: 100%; }
32 | body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
33 | 


--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import 'zone.js/dist/zone-testing';
 4 | import { getTestBed } from '@angular/core/testing';
 5 | import {
 6 |   BrowserDynamicTestingModule,
 7 |   platformBrowserDynamicTesting
 8 | } from '@angular/platform-browser-dynamic/testing';
 9 | 
10 | declare const require: any;
11 | 
12 | // First, initialize the Angular testing environment.
13 | getTestBed().initTestEnvironment(
14 |   BrowserDynamicTestingModule,
15 |   platformBrowserDynamicTesting()
16 | );
17 | // Then we find all the tests.
18 | const context = require.context('./', true, /\.spec\.ts$/);
19 | // And load the modules.
20 | context.keys().map(context);
21 | 


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "./out-tsc/app",
 5 |     "types": []
 6 |   },
 7 |   "files": [
 8 |     "src/main.ts",
 9 |     "src/polyfills.ts"
10 |   ],
11 |   "include": [
12 |     "src/**/*.ts"
13 |   ],
14 |   "exclude": [
15 |     "src/test.ts",
16 |     "src/**/*.spec.ts"
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "baseUrl": "./",
 5 |     "outDir": "./dist/out-tsc",
 6 |     "sourceMap": true,
 7 |     "declaration": false,
 8 |     "downlevelIteration": true,
 9 |     "experimentalDecorators": true,
10 |     "module": "esnext",
11 |     "resolveJsonModule": true,
12 |     "moduleResolution": "node",
13 |     "importHelpers": true,
14 |     "target": "esnext",
15 |     "typeRoots": [
16 |       "node_modules/@types"
17 |     ],
18 |     "lib": [
19 |       "es2018",
20 |       "dom"
21 |     ]
22 |   },
23 |   "angularCompilerOptions": {
24 |     "fullTemplateTypeCheck": true,
25 |     "strictInjectionParameters": true
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "./out-tsc/spec",
 5 |     "types": [
 6 |       "jasmine",
 7 |       "node"
 8 |     ]
 9 |   },
10 |   "files": [
11 |     "src/test.ts",
12 |     "src/polyfills.ts"
13 |   ],
14 |   "include": [
15 |     "src/**/*.spec.ts",
16 |     "src/**/*.d.ts"
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "tslint:recommended",
 3 |   "rules": {
 4 |     "array-type": false,
 5 |     "arrow-parens": false,
 6 |     "deprecation": {
 7 |       "severity": "warning"
 8 |     },
 9 |     "component-class-suffix": true,
10 |     "contextual-lifecycle": true,
11 |     "directive-class-suffix": true,
12 |     "directive-selector": [
13 |       true,
14 |       "attribute",
15 |       "app",
16 |       "camelCase"
17 |     ],
18 |     "component-selector": [
19 |       true,
20 |       "element",
21 |       "app",
22 |       "kebab-case"
23 |     ],
24 |     "import-blacklist": [
25 |       true,
26 |       "rxjs/Rx"
27 |     ],
28 |     "interface-name": false,
29 |     "max-classes-per-file": false,
30 |     "max-line-length": [
31 |       true,
32 |       140
33 |     ],
34 |     "member-access": false,
35 |     "member-ordering": [
36 |       true,
37 |       {
38 |         "order": [
39 |           "static-field",
40 |           "instance-field",
41 |           "static-method",
42 |           "instance-method"
43 |         ]
44 |       }
45 |     ],
46 |     "no-consecutive-blank-lines": false,
47 |     "no-console": [
48 |       true,
49 |       "debug",
50 |       "info",
51 |       "time",
52 |       "timeEnd",
53 |       "trace"
54 |     ],
55 |     "no-empty": false,
56 |     "no-inferrable-types": [
57 |       true,
58 |       "ignore-params"
59 |     ],
60 |     "no-non-null-assertion": true,
61 |     "no-redundant-jsdoc": true,
62 |     "no-switch-case-fall-through": true,
63 |     "no-var-requires": false,
64 |     "object-literal-key-quotes": [
65 |       true,
66 |       "as-needed"
67 |     ],
68 |     "object-literal-sort-keys": false,
69 |     "ordered-imports": false,
70 |     "quotemark": [
71 |       true,
72 |       "single"
73 |     ],
74 |     "trailing-comma": false,
75 |     "no-conflicting-lifecycle": true,
76 |     "no-host-metadata-property": true,
77 |     "no-input-rename": true,
78 |     "no-inputs-metadata-property": true,
79 |     "no-output-native": true,
80 |     "no-output-on-prefix": true,
81 |     "no-output-rename": true,
82 |     "no-outputs-metadata-property": true,
83 |     "template-banana-in-box": true,
84 |     "template-no-negated-async": true,
85 |     "use-lifecycle-interface": true,
86 |     "use-pipe-transform-interface": true
87 |   },
88 |   "rulesDirectory": [
89 |     "codelyzer"
90 |   ]
91 | }


--------------------------------------------------------------------------------