Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
.dropdown:hover .dropdown-content { display: block; border-radius: 5px;}
::ng-deep .chart {
background-color: rgb(68, 117, 117) !important;
color: rgb(252, 252, 252) !important;
}
.btn:hover{
font-weight:700;
}
<div id="dash" (window:resize) = "windowSize($event)" class = "ui-fluid" style="margin:50px">
<p-card header="Select/Add Stock: " [style]="{width: '20%',float: 'left'}">
<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>
<button (click)='checkAnother()' class="btn" style="background-color:rgb(18, 55, 68); color:white">Check Another</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>
<button type="submit" class="btn" style="background-color:rgb(18, 55, 68); color:white">Submit</button>
</form>
</div>
</p-card>
<p-card [styleClass]="'chart'" [style]="{width: '78%',float: 'right'}">
<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>
<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>
<ng-template #graph>
<div class= "ui-fluid" style="margin-left: 40px; margin-right: 30px;">
<p-card [styleClass]="'chart'" [style]="{width: '78%'}">
<google-chart #chart
[title]="title"
[type]="type"
[data]= "data"
[columns] = "columns"
[options]="options"
[width]="width"
[height]="height">
</google-chart>
</p-card>
</div>
</ng-template>
</div>
import { HostListener, Component, OnInit } from '@angular/core';
import { LiveMarketDataService } from '../../services/live-market-data.service';
import { Router } from '@angular/router';
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 = [];
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
},
width: window.innerWidth*0.6,
height: window.innerHeight*0.7,
bar: { groupWidth: '100%' },
animation: { duration: 500,
startup : true},
hAxis: {
textStyle: {
color: 'white'
}
},
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 router: Router) {
}
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(x);
const ys = tf.tensor1d(y);
await this.linearModel.fit(xs, ys)
this.predict(k);
}
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.options.width = event.target.innerWidth*0.6;
this.options.height = event.target.innerHeight*0.6;
}
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,
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]);
});
}
showLine(){
this.type = 'LineChart';
}
showCandle(){
this.type = 'CandlestickChart';
}
checkAnother() {
//location.reload();
this.data = [];
this.no = 0;
this.stockDetails = [];
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment