Skip to content

Instantly share code, notes, and snippets.

@dkp1903

dkp1903/candlestick.component.css

Created May 27, 2020 10:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dkp1903/d6063ad3cb8ee217e6f971594b0a2916 to your computer and use it in GitHub Desktop.
Save dkp1903/d6063ad3cb8ee217e6f971594b0a2916 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
candlestick.component.css
.dropdown:hover .dropdown-content { display: block; border-radius: 5px;}
.wrapper{
display: grid;
grid-template-columns:20% 80%;
grid-gap: 5em;
}
Raw
candlestick.component.html
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> -->
<!doctype html>
<html lang="en">
<head>
<!-- class="btn btn-secondary dropdown-toggle" -->
<!-- class="btn btn-primary" -->
<!-- class="btn" -->
</head>
<div class = "wrapper">
<p-card>
<div class="wrapper-1">
<div>
<p class="lead">Select a stock and a chart type: </p>
<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 class="col-md-4">
<div>
<button (click)='showLine()'>LineChart</button><br><br>
</div>
<div>
<button (click)='showCandle()'>CandlestickChart</button><br><br>
</div>
<div>
<button (click)='checkAnother()'>Check Another</button><br><br>
</div>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br>
<div>
<p class="lead" style="font-family: Oswald;">Add a stock</p>
<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" style="background-color:rgb(18, 55, 68); color:white">Submit</button>
</form>
</div>
</div><!-- Wrapper 1 ends here-->
</p-card>
<p-card>
<div class="wrapper-2">
<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 class="lead" style="font-size: small; font-family:Oswald">Displaying stock performance of: {{defaultStock}}</p>
<google-chart #chart
[title]="title"
[type]="type"
[data]= "data"
[columns] = "columns"
[options]="options"
[width]="width"
[height]="height">
</google-chart>
</div>
</p-card>
</div>
</html>
Raw
candlestick.component.ts
import { Component, OnInit } from '@angular/core';
import { LiveMarketDataService } from '../../services/live-market-data.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-candlestick',
templateUrl: './candlestick.component.html',
styleUrls: ['./candlestick.component.css']
})
export class CandlestickComponent implements OnInit {
selectedStock: string = '';
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;
min: Number;
maxTime: string;
minTime: string;
currStock: string;
data = [];
columns = ['Timestamp', 'Open', 'High', 'Low', 'Close'];
options = { candlestick: {
fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
risingColor: { strokeWidth: 0, fill: '#0f9d58' } // green
},
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 = 700;
height = 400;
count = 0;
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"},
];
this.defaultStock = 'IBM';
this.showChart('IBM', 'CandlestickChart');
}
addStock()
{
this.stocks.push(
{
symbol: this.symbol,
name: this.name
}
);
}
catcher(val){
this.showChart(val, this.type);
}
showChart(val, type) {
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.push([
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.data = this.stockDetails;
});
}
showLine(){
this.type = 'LineChart';
}
showCandle(){
this.type = 'CandlestickChart';
}
checkAnother() {
location.reload();
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment