add more indicators (#199)

* add standard deviation, BB %B, and ALMA indicators
facioquo · Feb 22, 2022 · d492ca3 · d492ca3
1 parent 9d18a8a
commit d492ca3
Show file tree

Hide file tree

Showing 15 changed files with 291 additions and 111 deletions.
diff --git a/Client/src/app/app.component.html b/Client/src/app/app.component.html
@@ -2,7 +2,7 @@
   <mat-toolbar class="toolbar noselect">
     <h1 class="no-wrap">
       <a href="https://github.com/DaveSkender/Stock.Charts/">
-        Stock.Chart
+        Stock.Charts
       </a>
     </h1>
     <div class="filler"></div>

diff --git a/Client/src/app/app.component.scss b/Client/src/app/app.component.scss
@@ -1,11 +1,8 @@
 @import "./styles";
 
 mat-toolbar {
-  padding: 0 8px;
-
-  .item {
-    margin-left: 8px;
-  }
+  color: $color-primary-700 !important;
+  padding: 0 9px;
 }
 
 .edit-button {
@@ -15,14 +12,13 @@ mat-toolbar {
 }
 
 .footer {
-  padding: 0 8px 8px 8px;
+  padding: 0 9px 9px 8px;
   text-align: center;
+  color: unset;
 
   a {
-    &:hover {
-      color: "red";
-    }
-
+    &:active,
+    &:hover,
     &:visited {
       color: unset;
     }

diff --git a/Client/src/app/chart/chart.component.html b/Client/src/app/chart/chart.component.html
@@ -1,5 +1,5 @@
 <!-- loading -->
-<div *ngIf="loading">
+<div *ngIf="cs.loading">
 
   <div style="margin-top:175px;text-align:center;font-family:Roboto,Arial,sans-serif;font-size:12px;">
     <p><img src="../assets/spinner.gif" alt="logging in" height="25"><br>WAKING UP DEMO. STANDBY</p>
@@ -8,10 +8,9 @@
 </div>
 
 <!-- CHART (MAIN OVERLAY) -->
-<div id="chart-overlay" class="chart-overlay-container">
+<div id="chart-overlay" class="chart-overlay-container" [hidden]="cs.loading">
   <canvas id="chartOverlay"></canvas>
 </div>
 
-
 <!-- CHART (OSCILLATORS) -->
-<div id="oscillators-zone"></div>
+<div id="oscillators-zone" [hidden]="cs.loading"></div>
diff --git a/Client/src/app/chart/chart.component.scss b/Client/src/app/chart/chart.component.scss
@@ -8,7 +8,7 @@
   // max-width: 850px;
   height: 50vh;
 
-  @media (max-height: 800px){
+  @media (max-height: 700px){
     height: 40vh;
   }
 

diff --git a/Client/src/app/chart/chart.component.ts b/Client/src/app/chart/chart.component.ts
@@ -17,15 +17,12 @@ export class ChartComponent implements OnInit {
     public readonly cs: ChartService
   ) { }
 
-  loading = true;
-
-  // STARTUP OPERATIONS
+    // STARTUP OPERATIONS
   ngOnInit() {
     this.startup();
   }
 
   startup() {
     this.cs.loadCharts();
-    this.loading = false;
   }
 }
diff --git a/Client/src/app/chart/chart.models.ts b/Client/src/app/chart/chart.models.ts
@@ -32,7 +32,6 @@ export interface IndicatorParamConfig {
   displayName: string;
   paramName: string;
   dataType: string;
-  order: number;
   defaultValue: number;
   minimum: number;
   maximum: number;

diff --git a/Client/src/app/chart/chart.service.ts b/Client/src/app/chart/chart.service.ts
@@ -65,6 +65,7 @@ export class ChartService {
   listings: IndicatorListing[] = [];
   selections: IndicatorSelection[] = [];
   chartOverlay: Chart;
+  loading = true;
 
   // CHART CONFIGURATIONS
   baseConfig() {
@@ -574,7 +575,10 @@ export class ChartService {
               error: (e: HttpErrorResponse) => { console.log(e); }
             });
         },
-        error: (e: HttpErrorResponse) => { console.log(e); }
+        error: (e: HttpErrorResponse) => { console.log(e); },
+        complete: () => {
+          this.loading = false;
+        }
       });
   }
 
@@ -677,18 +681,25 @@ export class ChartService {
       });
     }
     else { // add defaults
-      const def1 = this.defaultSelection("EMA");
+      const def1 = this.defaultSelection("LINEAR");
+      def1.params.find(x => x.paramName == "lookbackPeriods").value = 50;
       this.addSelection(def1, false);
 
       const def2 = this.defaultSelection("BB");
       this.addSelection(def2, false);
 
-      const def3 = this.defaultSelection("STO");
+      const def3 = this.defaultSelection("RSI");
+      def3.params.find(x => x.paramName == "lookbackPeriods").value = 5;
       this.addSelection(def3, false);
 
-      const def4 = this.defaultSelection("RSI");
-      def4.params.find(x => x.paramName == "lookbackPeriods").value = 5;
+      const def4 = this.defaultSelection("ADX");
       this.addSelection(def4, false);
+
+      const def5 = this.defaultSelection("SUPERTREND");
+      this.addSelection(def5, false);
+
+      const def6 = this.defaultSelection("MACD");
+      this.addSelection(def6, false);
     }
   }
 

diff --git a/Client/src/app/chart/picker/pick-list.component.html b/Client/src/app/chart/picker/pick-list.component.html
@@ -12,19 +12,21 @@
   </mat-slide-toggle>
 </div>
 
-<mat-nav-list>
-
+<mat-action-list>
   <mat-toolbar class="noselect" *ngIf="selections.length>0">
     indicators selected
   </mat-toolbar>
-  <a mat-list-item *ngFor="let selection of selections" matTooltip="click to remove this indicator"
-    (click)="removeSelection($event, selection.ucid)">
+  <button mat-list-item *ngFor="let selection of selections">
     <span mat-line>{{selection.label}}</span>
-    <button mat-mini-fab color="accent">
+    <div class="filler"></div>
+    <button mat-icon-button color="accent" (click)="removeSelection($event, selection.ucid)"
+      matTooltip="remove this indicator">
       <mat-icon>delete_forever</mat-icon>
     </button>
-  </a>
+  </button>
+</mat-action-list>
 
+<mat-nav-list>
   <mat-toolbar class="noselect">
     add new indicator
     <div class="filler"></div>

diff --git a/Client/src/app/chart/picker/pick-list.component.ts b/Client/src/app/chart/picker/pick-list.component.ts
@@ -18,7 +18,7 @@ export class PickListComponent {
 
   listings: IndicatorListing[];
   selections: IndicatorSelection[];
-  toggleColor = "warn";
+  toggleColor = "accent";
 
   constructor(
     public ts: StyleService,

diff --git a/Client/src/app/styles-theme.scss b/Client/src/app/styles-theme.scss
@@ -6,20 +6,6 @@
 @include mat.core();
 // ref: https://www.materialpalette.com
 
-// Define a light theme
-$light-primary: mat.define-palette(mat.$grey-palette);
-$light-accent: mat.define-palette(mat.$blue-gray-palette);
-$light-warn: mat.define-palette(mat.$deep-orange-palette);
-$light-theme: mat.define-light-theme(
-  (
-    color: (
-      primary: $light-primary,
-      accent: $light-accent,
-      warn: $light-warn,
-    ),
-  )
-);
-
 // Define a dark theme
 $dark-primary: mat.define-palette(mat.$grey-palette, 900);
 $dark-accent: mat.define-palette(mat.$blue-gray-palette, 900);
@@ -34,7 +20,22 @@ $dark-theme: mat.define-dark-theme(
   )
 );
 
+// Define a light theme
+$light-primary: mat.define-palette(mat.$grey-palette);
+$light-accent: mat.define-palette(mat.$blue-gray-palette);
+$light-warn: mat.define-palette(mat.$deep-orange-palette);
+$light-theme: mat.define-light-theme(
+  (
+    color: (
+      primary: $light-primary,
+      accent: $light-accent,
+      warn: $light-warn,
+    ),
+  )
+);
+
 // Apply the dark theme by default
+@include mat.core-theme($dark-theme);
 @include mat.all-component-themes($dark-theme);
 
 // angular extensions theming
@@ -60,7 +61,7 @@ $color-accent-800: mat.get-color-from-palette($dark-accent, 800);
 
 .dark-theme {
   color: $color-primary-500;
-  background-color: $color-primary;
+  background-color: $color-primary !important;
   min-height: 100vh;
 }
 
@@ -75,4 +76,5 @@ $color-accent-800: mat.get-color-from-palette($dark-accent, 800);
   $color-warn: mat.get-color-from-palette($light-warn, 900);
 
   background-color: "white" !important;
+  min-height: 100vh;
 }
diff --git a/Client/src/app/styles.scss b/Client/src/app/styles.scss
@@ -39,7 +39,7 @@ body {
 // TOOLBAR
 mat-toolbar {
   font-family: Google Sans, Roboto, Arial, Helvetica, sans-serif;
-  color: $color-primary-700 !important;
+  // color: $color-primary-700 !important;
 
   a {
     text-decoration: none;
@@ -49,11 +49,11 @@ mat-toolbar {
       color: $color-primary-500 !important;
     }
   }
+}
 
-  .filler {
-    flex: 1 1 auto;
-    text-align: center;
-  }
+.filler {
+  flex: 1 1 auto;
+  text-align: center;
 }
 
 mat-chip-list {
@@ -86,7 +86,6 @@ mat-radio-group {
   padding: 16px;
 }
 
-
 // COMMON CONTROLS
 .radio-button {
   margin: 5px;