candlestick.component.html

<div id="dash"  style="margin:50px">
  <div class="ui-g ui-fluid">
    <div class="ui-g-12 ui-md-3" >
      <p-card header="Select/Add Stock: " >
          <div class="wrapper-1">
                  <div>
                      <select
                        [(ngModel)] = "defaultStock"
                        (ngModelChange) = 'catcher($event)'>
                          <option
                            *ngFor="let s of stocks"
                            [value]="s.symbol">
                            <p >{{s.name}}</p>
                          </option>
                      </select>
                  </div>
                  <br>
                    <div>
                      <button  (click)='showLine()' class="btn" style="background-color:rgb(18, 55, 68); color:white">LineChart</button><br><br>
                    </div>
                    <div>
                      <button  (click)='showCandle()' class="btn" style="background-color:rgb(18, 55, 68); color:white">CandlestickChart</button><br><br>
                    </div>
              </div>
                <div>

                  <form (submit) = 'addStock()'>
                        <div class="form-group">
                          <label for="symbol">Symbol</label>
                          <input type="text" [(ngModel)]="symbol" name="symbol" class="form-control">
                        </div>

                        <div class="form-group">
                          <label for="name">Name</label>
                          <input type="text"  [(ngModel)]="name" name="name" class="form-control">
                        </div>
                        <div>
                        <button type="submit"  class="btn" style="background-color:rgb(18, 55, 68); color:white">Submit</button>
                        </div>
                        <div style="margin-top: 20px;">
                        <a href={{url}}>
                          <button class="btn" style="background-color:rgb(18, 55, 68); color:white" >Download data</button></a>
                        </div>
                        </form>

                </div>
        </p-card>
      </div>

    <div class="ui-g-12 ui-md-9 ui-g-nopad" >

      <p-card [styleClass]="'chart'" >
        <div>
          <p class="lead" style="text-align: center;font-size: small; font-family:Oswald">Displaying stock performance of: {{defaultStock}}</p>

          <p class="lead" style="text-align: center; font-size: small; font-family:Oswald;">The max closing price for <b>{{currStock}}</b> stock is: {{max}} at {{maxTime}}</p>
          <p class="lead" style="text-align: center; font-size: small; font-family:Oswald;">The min closing price for <b>{{currStock}}</b> stock is: {{min}} at {{minTime}}</p>
          <p id = "chart-type" class="lead" style="text-align: center;font-size: small; font-family:Oswald">Type: {{type}}</p>

          <div *ngIf="no==0; else graph">
            <p class="lead" style="text-align: center; font-size: large; font-family:Oswald;"><b>Pick a stock to continue</b></p>
            <div style="text-align: center;"><img src="../../../assets/images/loading.gif" /></div>
        </div>
          <div class="ui-g-12" (window:resize) = "windowSize($event)">

              <ng-template #graph>
                <div  style="margin-left: 40px;">
                <google-chart #chart
                [title]="title"
                [type]="type"
                [data]= "data"
                [columns] = "columns"
                [options]="options"
                [width]="width"
                [height]="height">
              </google-chart>
              </div>
              </ng-template>

        </div>
        </div>
      </p-card>
    </div>
  </div>

</div>

candlestick.component.ts

import { HostListener, Component, OnInit } from '@angular/core';
import { LiveMarketDataService } from '../../services/live-market-data.service';
import { Router } from '@angular/router';
import { HttpClient, HttpParams } from '@angular/common/http';
import * as tf from '@tensorflow/tfjs';

@Component({
  selector: 'app-candlestick',
  templateUrl: './candlestick.component.html',
  styleUrls: ['./candlestick.component.css']
})
export class CandlestickComponent implements OnInit {
  selectedStock: string = '';
  @HostListener('window:resize', ['$event'])

  selectChangeHandler(event: any) {
    this.selectedStock = event.target.value;

  }
  stocks = [];
  symbol: string;
  name: string;
  mySubscription: any;
  largest: Number;
  defaultStock: string;
  stockDetails = [];
  title = this.selectedStock;
  type = 'CandlestickChart';
  max: Number;
  overAllMax: Number = 0;
  overAllMin: Number = 9999999;
  min: Number;
  maxTime: string;
  minTime: string;
  currStock: string;
  data = [];
  url = 'https://www.alphavantage.co/query?function=TIME_SERIES_INTRADAY&symbol=';
  w = document.documentElement.clientWidth;
  h = document.documentElement.clientHeight;
  columns = ['Timestamp', 'Open', 'High', 'Low', 'Close'];
  options = { candlestick: {
    fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
    risingColor: { strokeWidth: 0, fill: '#0f9d58' }   // green
  },

  bar: { groupWidth: '100%' },

  hAxis: {
    textStyle: {
      color: 'white'
    },
    format: 'dd-MMM-yyyy'
  },
  legend: {textStyle: {color: 'white'}},
  vAxis: {
    textStyle: {
      color: 'white'
    }
  },
  chartArea: {left:80,top:20,width:'70%',height:'75%'},
backgroundColor: '#000000',} ;
  width = this.w*0.60;
  height = this.h*0.70;
  count = 0;
  no = 0;
  stocker = {};

  linearModel: tf.Sequential;
  prediction: any;
  arr: any = [];
  constructor(private livemarketdataservice: LiveMarketDataService, private httpclient: HttpClient) {
 }

  ngOnInit(): any
{   this.stocks = [
      {symbol: "IBM", name: "IBM"},
      {symbol: "FB", name: "Facebook"},
      {symbol: "WMT", name: "Walmart"},
      {symbol: "SNAP", name: "Snap Inc"},
      {symbol: "AAPL", name: "Apple"},
      {symbol: "NFLX", name: "Netflix"},
      {symbol: "TWTR", name: "Twitter"},
      {symbol: "AMZN", name: "Amazon"},
      {symbol: "SPOT", name: "Spotify"},
      {symbol: "TSLA", name: "Tesla Inc"},
      {symbol: "DAL", name: "Delta Airlines"},
      {symbol: "MSFT", name: "Microsoft"},
      {symbol: "MA", name: "Mastercard"},
];
}
/*************************************** */
// Prediction
async train(x): Promise<any> {
      this.linearModel = tf.sequential();
      this.linearModel.add(tf.layers.dense({units: 1, inputShape: [1]}));
      this.linearModel.compile({loss: 'meanSquaredError', optimizer: 'sgd'});
      let y = [];
      for(let i = 1; i < x.length; i++)
          y.push(x[i]);
      let k = x.pop();
      const xs = tf.tensor1d([1, 2, 3, 4, 5, 6, 7, 8, 9]);
      const ys = tf.tensor1d([2, 3, 4, 5, 6, 7, 8, 9, 10]);

      await this.linearModel.fit(xs, ys)
      this.predict(11);
}

predict(val: number)
{
  const output = this.linearModel.predict(tf.tensor2d([val], [1, 1])) as any;
  this.prediction = Array.from(output.dataSync())[0];
}
/************** */


windowSize(event) {

  this.width = event.target.innerWidth*0.55;
  this.height = event.target.innerHeight*0.6;
  let k = this.currStock;
  this.data = [];
  this.stockDetails = [];
  this.showChart(k, 'CandlestickChart');
}
addStock()
{
  this.stocks.push(
    {
      symbol: this.symbol,
      name: this.name
    }
  );
}

catcher(val){
  //this.windowSize();
  this.showChart(val, this.type);
}

showChart(val, type) {

      this.no++;
      this.type = type;
      this.livemarketdataservice.stockLiveData(val).subscribe(res => {

      this.currStock = val;
      this.max = 0;
      this.min = 999999;
      let timeStamp = res["Time Series (30min)"];
      let element: any;

      for(element in timeStamp)
      {
          if(this.max < parseFloat(res["Time Series (30min)"][element]["4. close"]))
          {
            this.max = parseFloat(res["Time Series (30min)"][element]["4. close"]);
            this.maxTime = element;
          }
          if(this.min > parseFloat(res["Time Series (30min)"][element]["4. close"]))
          {
            this.min = parseFloat(res["Time Series (30min)"][element]["4. close"]);
            this.minTime = element;
          }

        this.stockDetails.unshift([
        element.slice(11, 16),
        parseFloat(res["Time Series (30min)"][element]["3. low"]),
        parseFloat(res["Time Series (30min)"][element]["1. open"]),
        parseFloat(res["Time Series (30min)"][element]["4. close"]),
        parseFloat(res["Time Series (30min)"][element]["2. high"]),

      ])
      this.arr.unshift(parseFloat(res["Time Series (30min)"][element]["4. close"]));
      }
      this.data = this.stockDetails;

      //Prediction
       this.stocker[val] = this.arr;
       this.train(this.stocker[val]);
       this.url += this.currStock + '&interval=5min&apikey=421KN1U6YLBFSGR4&datatype=csv';

  });
  this.data = [];
      this.stockDetails = [];

}
download(){
  return this.httpclient.get(this.url);

}

showLine(){
  this.type = 'LineChart';
}
showCandle(){
  this.type = 'CandlestickChart';
}
checkAnother() {
      //location.reload();
      this.data = [];
      this.no = 0;
      this.stockDetails = [];

}
}