add more indicators

CONTRIBUTING.md

@@ -26,7 +26,7 @@ If you are reporting a bug, please submit an Issue with a detailed description o
 
 Submit a Pull Request with a clear list of what you've done (read more about [pull requests](http://help.github.com/pull-requests/)).
 
-After a Pull Request is reviewed, accepted, and merged to `main`, we may batch changes before publishing a new package version to the public NuGet repository.  Please be patient with turnaround time.
+After a Pull Request is reviewed, accepted, and merged to `main`, we may batch changes before publishing the site.  Please be patient with turnaround time.
 
 ## Contact us
 

Client/package.json

@@ -11,16 +11,16 @@
   },
   "private": false,
   "dependencies": {
-    "@angular/animations": "~13.2.2",
-    "@angular/cdk": "~13.2.2",
-    "@angular/common": "~13.2.2",
-    "@angular/compiler": "~13.2.2",
-    "@angular/core": "~13.2.2",
-    "@angular/forms": "~13.2.2",
-    "@angular/material": "~13.2.2",
-    "@angular/platform-browser": "~13.2.2",
-    "@angular/platform-browser-dynamic": "~13.2.2",
-    "@angular/router": "~13.2.2",
+    "@angular/animations": "~13.2.3",
+    "@angular/cdk": "~13.2.3",
+    "@angular/common": "~13.2.3",
+    "@angular/compiler": "~13.2.3",
+    "@angular/core": "~13.2.3",
+    "@angular/forms": "~13.2.3",
+    "@angular/material": "~13.2.3",
+    "@angular/platform-browser": "~13.2.3",
+    "@angular/platform-browser-dynamic": "~13.2.3",
+    "@angular/router": "~13.2.3",
     "@ctrl/tinycolor": "^3.4.0",
     "@fortawesome/angular-fontawesome": "^0.10.1",
     "@fortawesome/fontawesome-svg-core": "^1.3.0",
@@ -39,15 +39,15 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~13.2.3",
+    "@angular-devkit/build-angular": "~13.2.4",
     "@angular-eslint/builder": "~13.1.0",
     "@angular-eslint/eslint-plugin": "~13.1.0",
     "@angular-eslint/eslint-plugin-template": "~13.1.0",
     "@angular-eslint/schematics": "~13.1.0",
     "@angular-eslint/template-parser": "~13.1.0",
-    "@angular/cli": "~13.2.3",
-    "@angular/compiler-cli": "~13.2.2",
-    "@angular/language-service": "~13.2.2",
+    "@angular/cli": "~13.2.4",
+    "@angular/compiler-cli": "~13.2.3",
+    "@angular/language-service": "~13.2.3",
     "@types/node": "^17.0.14",
     "@typescript-eslint/eslint-plugin": "^5.10.2",
     "@typescript-eslint/parser": "^5.10.2",

Client/src/app/app.component.html

@@ -1,19 +1,31 @@
 <div [ngClass]="ts.isDarkTheme ? 'dark-theme' : 'light-theme'">
   <mat-toolbar class="toolbar noselect">
-    <h1 matTooltip="Visit the documentation site for Stock Indicators for .NET">
+    <h1 class="no-wrap" matTooltip="Visit the documentation site for Stock Indicators for .NET">
       <a href="https://daveskender.github.io/Stock.Indicators/">
-        Stock.Charts
+        Stock Indicators for .NET (demo)
       </a>
     </h1>
     <div class="filler"></div>
-    <div matTooltip="GitHub repository for this demo">
-      <a href="https://github.com/DaveSkender/Stock.Charts">
-        <fa-icon [icon]="faGithub" size="2x"></fa-icon>
-      </a>
-    </div>
+    <button mat-mini-fab color="default" (click)="openPickList()" class="edit-button" matTooltip="change indicators and settings">
+      <mat-icon color="primary">edit</mat-icon>
+    </button>
   </mat-toolbar>
 
+
   <div id="main-content" class="body-container">
     <app-chart></app-chart>
   </div>
+
+  <div class="footer">
+    Demo of the
+    <strong>
+      <a href="https://daveskender.github.io/Stock.Indicators/" target="_blank" rel="noopener">
+        Stock Indicators for .NET</a>
+    </strong> NuGet library
+  </div>
+  <div class="footer" matTooltip="GitHub repository for this stock chart demo">
+    <a href="https://github.com/DaveSkender/Stock.Charts">
+      <fa-icon [icon]="faGithub" size="2x"></fa-icon>
+    </a>
+  </div>
 </div>

Client/src/app/app.component.scss

@@ -1,5 +1,30 @@
 @import "./styles";
 
-mat-toolbar{
-  padding-left: 8px;
+mat-toolbar {
+  padding: 0 8px;
+
+  .item {
+    margin-left: 8px;
+  }
+}
+
+.edit-button {
+  position: fixed;
+  top: 12px;
+  right: 10px;
+}
+
+.footer {
+  padding: 0 8px 8px 8px;
+  text-align: center;
+
+  a {
+    &:hover {
+      color: "red";
+    }
+
+    &:visited {
+      color: unset;
+    }
+  }
 }

Client/src/app/app.component.ts

@@ -2,6 +2,9 @@ import { Component, OnInit } from '@angular/core';
 import { faGithub } from '@fortawesome/free-brands-svg-icons';
 import { StyleService } from './style.service';
 
+import { PickListComponent } from './chart/picker/pick-list.component';
+import { MatDialog } from '@angular/material/dialog';
+
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
@@ -13,9 +16,19 @@ export class AppComponent implements OnInit {
 
   constructor(
     public readonly ts: StyleService,
+    private readonly list: MatDialog
   ) { }
 
   ngOnInit(): void {
     this.ts.getTheme();
   }
+
+  // PICKERS
+  openPickList(): void {
+    const listRef = this.list.open(PickListComponent, {
+      minWidth: '300px',
+      maxHeight: '80vh'
+    });
+  }
+
 }

Client/src/app/app.module.ts

@@ -2,11 +2,9 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
 
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 
@@ -25,14 +23,11 @@ import { ChartModule } from './chart/chart.module';
     // Angular
     BrowserModule,
     BrowserAnimationsModule,
-
     CommonModule,
-    FormsModule,
 
     // Materials Design
     MatButtonModule,
     MatIconModule,
-    MatSlideToggleModule,
     MatToolbarModule,
     MatTooltipModule,
 

Client/src/app/chart/api.service.ts

@@ -19,7 +19,7 @@ import {
 @Injectable()
 export class ApiService {
 
-  extraBars = 8;
+  extraBars = 7;
 
   constructor(
     private readonly http: HttpClient
@@ -142,7 +142,7 @@ export class ApiService {
           type: 'line',
           data: [],
           yAxisID: 'yAxis',
-          pointRadius: 2,
+          pointRadius: r.lineWidth,
           pointBorderWidth: 0,
           pointBorderColor: r.color,
           pointBackgroundColor: r.color,
@@ -162,6 +162,12 @@ export class ApiService {
           backgroundColor: r.color,
           order: r.order
         };
+
+        // add stack, if specified
+        if (c.stack) {
+          barDataset.stack = c.stack;
+        }
+
         return barDataset;
     }
   }

Client/src/app/chart/chart.component.html

@@ -12,9 +12,6 @@
   <canvas id="chartOverlay"></canvas>
 </div>
 
-<!-- ADD INDICATOR -->
-<button mat-mini-fab color="accent" class="button-listing" (click)="openPickList()" matTooltip="add a new indicator">
-  <mat-icon>settings</mat-icon>
-</button>
 
 <!-- CHART (OSCILLATORS) -->
+<div id="oscillators-zone"></div>

Client/src/app/chart/chart.component.scss

@@ -5,7 +5,7 @@
   margin: 0;
   border-style: none;
   border-width: 0;
-  min-height: 55vh;
+  min-height: 50vh;
   max-height: calc(100vh - 64px);
 
   @media (max-height: 400px){
@@ -18,19 +18,5 @@
   margin: 0;
   border-style: none;
   border-width: 0;
-  height: 10vh;
-}
-
-.button-listing {
-  position: fixed;
-  left: 50%;
-  margin-left: -28px;
-  bottom: 15px;
-  color: $color-primary-700 !important;
-  background-color: $color-primary-800T !important;
-
-  &:hover {
-    color: $color-primary-500 !important;
-    background-color: $color-accent-800 !important;
-  }
+  height: 12vh;
 }

Client/src/app/chart/chart.component.ts

@@ -1,20 +1,20 @@
-import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 
 import { ChartService } from './chart.service';
 
-import { PickListComponent } from './picker/pick-list.component';
-import { MatBottomSheet } from '@angular/material/bottom-sheet';
-
 @Component({
   selector: 'app-chart',
   templateUrl: './chart.component.html',
-  styleUrls: ['./chart.component.scss']
+  styleUrls: ['./chart.component.scss'],
+
+  // allows injected HTML to get styles?
+  // see https://github.com/angular/angular/issues/7845
+  encapsulation: ViewEncapsulation.None
 })
 export class ChartComponent implements OnInit {
 
   constructor(
-    public readonly cs: ChartService,
-    private readonly bs: MatBottomSheet
+    public readonly cs: ChartService
   ) { }
 
   loading = true;
@@ -25,13 +25,7 @@ export class ChartComponent implements OnInit {
   }
 
   startup() {
-
     this.cs.loadCharts();
     this.loading = false;
   }
-
-  // PICKERS
-  openPickList(): void {
-    const bsRef = this.bs.open(PickListComponent);
-  }
 }

Client/src/app/chart/chart.models.ts

@@ -1,4 +1,8 @@
-import { BarControllerDatasetOptions, Chart, ChartDataset, ScatterDataPoint } from "chart.js";
+import {
+  BarControllerDatasetOptions,
+  Chart,
+  ChartDataset
+} from "chart.js";
 
 export interface Quote {
   date: Date;
@@ -14,7 +18,7 @@ export interface Quote {
 export interface IndicatorListing {
   name: string;
   uiid: string;
-  labelTemplate: string;
+  legendTemplate: string;
   endpoint: string;
   category: string;
   chartType: string;
@@ -36,11 +40,12 @@ export interface IndicatorParamConfig {
 }
 
 export interface IndicatorResultConfig {
-  labelTemplate: string;
   displayName: string;
+  tooltipTemplate: string;
   dataName: string;
   dataType: string;
   lineType: string;
+  stack: string,
   lineWidth: number;
   defaultColor: string;
   fill: ChartFill;