DHBW/TelegramAktienBot
1
0
Fork 0
Code Issues 6 Pull Requests 26 Actions Packages Projects Releases Wiki Activity
d5c245856b
TelegramAktienBot/frontend/documentation/components/DashboardComponent.html

1399 lines
54 KiB
HTML
Raw Normal View History

Add documentation
2022-05-03 08:59:36 +00:00
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>aktienbot documentation</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="../images/favicon.ico">
<link rel="stylesheet" href="../styles/style.css">
<link rel="stylesheet" href="../styles/dark.css">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top visible-xs">
<a href="../" class="navbar-brand">aktienbot documentation</a>
<button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
</div>
<div class="xs-menu menu" id="mobile-menu">
<div id="book-search-input" role="search"><input type="text" placeholder="Type to search"></div> <compodoc-menu></compodoc-menu>
</div>
<div class="container-fluid main">
<div class="row main">
<div class="hidden-xs menu">
<compodoc-menu mode="normal"></compodoc-menu>
</div>
<!-- START CONTENT -->
<div class="content component">
<div class="content-data">
<ol class="breadcrumb">
<li>Components</li>
<li
>
DashboardComponent</li>
</ol>
<ul class="nav nav-tabs" role="tablist">
<li class="active">
<a href="#info" role="tab" id="info-tab" data-toggle="tab" data-link="info">Info</a>
</li>
<li >
<a href="#source" role="tab" id="source-tab" data-toggle="tab" data-link="source">Source</a>
</li>
<li >
<a href="#templateData" role="tab" id="templateData-tab" data-toggle="tab" data-link="template">Template</a>
</li>
<li >
<a href="#styleData" role="tab" id="styleData-tab" data-toggle="tab" data-link="style">Styles</a>
</li>
<li >
<a href="#tree" role="tab" id="tree-tab" data-toggle="tab" data-link="dom-tree">DOM Tree</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in" id="c-info"><p class="comment">
<h3>File</h3>
</p>
<p class="comment">
<code>src/app/Views/dashboard/dashboard.component.ts</code>
</p>
<p class="comment">
<h3>Implements</h3>
</p>
<p class="comment">
<code><a href="https://angular.io/api/core/OnInit" target="_blank" >OnInit</a></code>
</p>
<section>
<h3>Metadata</h3>
<table class="table table-sm table-hover metadata">
<tbody>
<tr>
<td class="col-md-3">selector</td>
<td class="col-md-9"><code>app-dashboard</code></td>
</tr>
<tr>
<td class="col-md-3">styleUrls</td>
<td class="col-md-9"><code>./dashboard.component.scss</code></td>
</tr>
<tr>
<td class="col-md-3">templateUrl</td>
<td class="col-md-9"><code>./dashboard.component.html</code></td>
</tr>
</tbody>
</table>
</section>
<section>
<h3 id="index">Index</h3>
<table class="table table-sm table-bordered index-table">
<tbody>
<tr>
<td class="col-md-4">
<h6><b>Properties</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#comment" >comment</a>
</li>
<li>
<a href="#count" >count</a>
</li>
<li>
<a href="#dataSource" >dataSource</a>
</li>
<li>
<a href="#dataSourceStocks" >dataSourceStocks</a>
</li>
<li>
<a href="#dataSourceTransactions" >dataSourceTransactions</a>
</li>
<li>
<a href="#depotCost" >depotCost</a>
</li>
<li>
<a href="#depotCurrentValue" >depotCurrentValue</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#dialog" >dialog</a>
</li>
<li>
<a href="#displayedColumns" >displayedColumns</a>
</li>
<li>
<a href="#displayedColumnsStocks" >displayedColumnsStocks</a>
</li>
<li>
<a href="#isin" >isin</a>
</li>
<li>
<a href="#price" >price</a>
</li>
<li>
<a href="#profit" >profit</a>
</li>
<li>
<a href="#time" >time</a>
</li>
</ul>
</td>
</tr>
<tr>
<td class="col-md-4">
<h6><b>Methods</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#getTransactions" >getTransactions</a>
</li>
<li>
<a href="#ngOnInit" >ngOnInit</a>
</li>
<li>
<a href="#openDialog" >openDialog</a>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</section>
<section>
<h3 id="constructor">Constructor</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<code>constructor(dataService: <a href="../injectables/DataService.html" target="_self">DataService</a>, helper: <a href="../injectables/HelperService.html" target="_self">HelperService</a>, dialog: MatDialog)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="45" class="link-to-prism">src/app/Views/dashboard/dashboard.component.ts:45</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div>
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>dataService</td>
<td>
<code><a href="../injectables/DataService.html" target="_self" >DataService</a></code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>helper</td>
<td>
<code><a href="../injectables/HelperService.html" target="_self" >HelperService</a></code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>dialog</td>
<td>
<code>MatDialog</code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</section>
<section>
<h3 id="methods">
Methods
</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="getTransactions"></a>
<span class="name">
<span ><b>getTransactions</b></span>
<a href="#getTransactions"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>getTransactions()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="58"
class="link-to-prism">src/app/Views/dashboard/dashboard.component.ts:58</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="ngOnInit"></a>
<span class="name">
<span ><b>ngOnInit</b></span>
<a href="#ngOnInit"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>ngOnInit()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="80"
class="link-to-prism">src/app/Views/dashboard/dashboard.component.ts:80</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="openDialog"></a>
<span class="name">
<span ><b>openDialog</b></span>
<a href="#openDialog"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>openDialog()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="125"
class="link-to-prism">src/app/Views/dashboard/dashboard.component.ts:125</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
</section>
<section>
<h3 id="inputs">
Properties
</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="comment"></a>
<span class="name">
<span ><b>comment</b></span>
<a href="#comment"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>&#x27;&#x27;</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="119" class="link-to-prism">src/app/Views/dashboard/dashboard.component.ts:119</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="count"></a>
<span class="name">
<span ><b>count</b></span>
<a href="#count"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>0.0</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="122" class="link-to-prism">src/app/Views/dashboard/dashboard.component.ts:122</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="dataSource"></a>
<span class="name">
<span ><b>dataSource</b></span>
<a href="#dataSource"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>ELEMENT_DATA</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="156" class="link-to-prism">src/app/Views/dashboard/dashboard.component.ts:156</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="dataSourceStocks"></a>
<span class="name">
<span ><b>dataSourceStocks</b></span>
<a href="#dataSourceStocks"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../interfaces/Stock.html" target="_self" >Stock[]</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>[]</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="53" class="link-to-prism">src/app/Views/dashboard/dashboard.component.ts:53</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="dataSourceTransactions"></a>
<span class="name">
<span ><b>dataSourceTransactions</b></span>
<a href="#dataSourceTransactions"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../interfaces/TransactionData.html" target="_self" >TransactionData[]</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>[]</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="52" class="link-to-prism">src/app/Views/dashboard/dashboard.component.ts:52</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="depotCost"></a>
<span class="name">
<span ><b>depotCost</b></span>
<a href="#depotCost"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>0</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="55" class="link-to-prism">src/app/Views/dashboard/dashboard.component.ts:55</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="depotCurrentValue"></a>
<span class="name">
<span ><b>depotCurrentValue</b></span>
<a href="#depotCurrentValue"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>0</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="54" class="link-to-prism">src/app/Views/dashboard/dashboard.component.ts:54</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="dialog"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>dialog</b></span>
<a href="#dialog"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>MatDialog</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="49" class="link-to-prism">src/app/Views/dashboard/dashboard.component.ts:49</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="displayedColumns"></a>
<span class="name">
<span ><b>displayedColumns</b></span>
<a href="#displayedColumns"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>string[]</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>[
&#x27;comment&#x27;,
&#x27;weight&#x27;,
&#x27;position&#x27;,
&#x27;name&#x27;,
&#x27;symbol&#x27;,
]</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="143" class="link-to-prism">src/app/Views/dashboard/dashboard.component.ts:143</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="displayedColumnsStocks"></a>
<span class="name">
<span ><b>displayedColumnsStocks</b></span>
<a href="#displayedColumnsStocks"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>string[]</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>[
&#x27;position&#x27;,
&#x27;name&#x27;,
&#x27;weight&#x27;,
&#x27;current-price&#x27;,
]</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="150" class="link-to-prism">src/app/Views/dashboard/dashboard.component.ts:150</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="isin"></a>
<span class="name">
<span ><b>isin</b></span>
<a href="#isin"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>&#x27;&#x27;</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="120" class="link-to-prism">src/app/Views/dashboard/dashboard.component.ts:120</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="price"></a>
<span class="name">
<span ><b>price</b></span>
<a href="#price"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>0.0</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="123" class="link-to-prism">src/app/Views/dashboard/dashboard.component.ts:123</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="profit"></a>
<span class="name">
<span ><b>profit</b></span>
<a href="#profit"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>0</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="56" class="link-to-prism">src/app/Views/dashboard/dashboard.component.ts:56</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="time"></a>
<span class="name">
<span ><b>time</b></span>
<a href="#time"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" target="_blank" >Date</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>new Date()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="121" class="link-to-prism">src/app/Views/dashboard/dashboard.component.ts:121</a></div>
</td>
</tr>
</tbody>
</table>
</section>
</div>
<div class="tab-pane fade tab-source-code" id="c-source">
<pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import { Component, OnInit } from &#x27;@angular/core&#x27;;
import { DataService } from &#x27;src/app/Services/data.service&#x27;;
import { MatDialog } from &#x27;@angular/material/dialog&#x27;;
import { UserDialogComponent } from &#x27;./user-dialog/user-dialog.component&#x27;;
import { HelperService } from &#x27;src/app/Helpers/helper.service&#x27;;
export interface PeriodicElement {
name: string;
position: number;
weight: number;
symbol: string;
}
export interface Stock {
count: number;
currentPrice: number;
symbol: string;
time: string;
}
//symbol count lastTransaction boughtPrice currentPrice(+?)
const ELEMENT_DATA: PeriodicElement[] &#x3D; [
{ position: 1, name: &#x27;Hydrogen&#x27;, weight: 1.0079, symbol: &#x27;H&#x27; },
{ position: 2, name: &#x27;Helium&#x27;, weight: 4.0026, symbol: &#x27;He&#x27; },
{ position: 3, name: &#x27;Lithium&#x27;, weight: 6.941, symbol: &#x27;Li&#x27; },
];
var TRANSACTION_DATA: TransactionData[] &#x3D; [];
var STOCK_DATA: Stock[] &#x3D; [];
export interface TransactionData {
comment: string;
isin: string;
time: string;
count: number;
price: number;
}
@Component({
selector: &#x27;app-dashboard&#x27;,
templateUrl: &#x27;./dashboard.component.html&#x27;,
styleUrls: [&#x27;./dashboard.component.scss&#x27;],
})
export class DashboardComponent implements OnInit {
constructor(
private dataService: DataService,
private helper: HelperService,
public dialog: MatDialog
) {}
dataSourceTransactions: TransactionData[] &#x3D; [];
dataSourceStocks: Stock[] &#x3D; [];
depotCurrentValue: number &#x3D; 0;
depotCost: number &#x3D; 0;
profit: number &#x3D; 0;
getTransactions() {
var TRANSACTION_DATA: TransactionData[] &#x3D; [];
this.dataService.getTransactionData().subscribe((response: any) &#x3D;&gt; {
var data &#x3D; JSON.parse(response);
this.depotCost &#x3D; 0;
for (let i &#x3D; 0; i &lt; data.data.length; i++) {
this.depotCost +&#x3D; data.data[i].price;
TRANSACTION_DATA.push({
comment: data.data[i].comment,
isin: data.data[i].isin,
time: data.data[i].time,
count: data.data[i].count,
price: data.data[i].price,
});
}
this.dataSourceTransactions &#x3D; TRANSACTION_DATA;
//TODO move to helper service
this.profit &#x3D; this.depotCurrentValue - this.depotCost;
});
}
ngOnInit() {
this.dataService.getStockData().subscribe((response: any) &#x3D;&gt; {
var data &#x3D; JSON.parse(response);
this.depotCurrentValue &#x3D; 0;
for (let i &#x3D; 0; i &lt; data.data.length; i++) {
this.depotCurrentValue &#x3D; data.data[i].current_price;
STOCK_DATA.push({
count: data.data[i].count,
currentPrice: data.data[i].current_price,
symbol: data.data[i].symbol,
time: data.data[i].last_transaction,
});
}
this.dataSourceStocks &#x3D; STOCK_DATA;
//TODO move to helper service
this.profit +&#x3D; this.depotCurrentValue;
});
this.dataService.getTransactionData().subscribe((response: any) &#x3D;&gt; {
var data &#x3D; JSON.parse(response);
this.depotCost &#x3D; 0;
for (let i &#x3D; 0; i &lt; data.data.length; i++) {
this.depotCost +&#x3D; data.data[i].price;
TRANSACTION_DATA.push({
comment: data.data[i].comment,
isin: data.data[i].isin,
time: data.data[i].time,
count: data.data[i].count,
price: data.data[i].price,
});
}
this.dataSourceTransactions &#x3D; TRANSACTION_DATA;
//TODO move to helper service
this.profit -&#x3D; this.depotCost;
});
}
comment: string &#x3D; &#x27;&#x27;;
isin: string &#x3D; &#x27;&#x27;;
time: Date &#x3D; new Date();
count: number &#x3D; 0.0;
price: number &#x3D; 0.0;
openDialog(): void {
const dialogRef &#x3D; this.dialog.open(UserDialogComponent, {
width: &#x27;50vw&#x27;,
data: {
comment: this.comment,
isin: this.isin,
time: this.time,
count: this.count,
price: this.price,
},
});
dialogRef.afterClosed().subscribe((result) &#x3D;&gt; {
this.helper.delay(1000);
this.getTransactions();
});
}
displayedColumns: string[] &#x3D; [
&#x27;comment&#x27;,
&#x27;weight&#x27;,
&#x27;position&#x27;,
&#x27;name&#x27;,
&#x27;symbol&#x27;,
];
displayedColumnsStocks: string[] &#x3D; [
&#x27;position&#x27;,
&#x27;name&#x27;,
&#x27;weight&#x27;,
&#x27;current-price&#x27;,
];
dataSource &#x3D; ELEMENT_DATA;
}
</code></pre>
</div>
<div class="tab-pane fade " id="c-templateData">
<pre class="line-numbers"><code class="language-html">&lt;mat-grid-list cols&#x3D;&quot;2&quot; rowHeight&#x3D;&quot;45%&quot;&gt;
&lt;!-- Stocks --&gt;
&lt;mat-grid-tile colspan&#x3D;&quot;1&quot; rowspan&#x3D;&quot;2&quot;&gt;
&lt;div class&#x3D;&quot;stockOverview&quot;&gt;
&lt;div class&#x3D;&quot;heading&quot;&gt;
&lt;div class&#x3D;&quot;vertical-center&quot;&gt;Stocks&lt;/div&gt;
&lt;/div&gt;
&lt;mat-card class&#x3D;&quot;placeholder&quot;&gt;
&lt;div class&#x3D;&quot;stockTableLHS&quot;&gt;
&lt;table mat-table [dataSource]&#x3D;&quot;dataSourceStocks&quot;&gt;
&lt;!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition&quot; --&gt;
&lt;!-- Symbol Column --&gt;
&lt;ng-container matColumnDef&#x3D;&quot;position&quot;&gt;
&lt;th mat-header-cell *matHeaderCellDef&gt;Symbol&lt;/th&gt;
&lt;td mat-cell *matCellDef&#x3D;&quot;let element&quot;&gt;{{ element.symbol }}&lt;/td&gt;
&lt;/ng-container&gt;
&lt;!-- Count Column --&gt;
&lt;ng-container matColumnDef&#x3D;&quot;name&quot;&gt;
&lt;th mat-header-cell *matHeaderCellDef&gt;Count&lt;/th&gt;
&lt;td mat-cell *matCellDef&#x3D;&quot;let element&quot;&gt;{{ element.count }}&lt;/td&gt;
&lt;/ng-container&gt;
&lt;!-- Time Column --&gt;
&lt;ng-container matColumnDef&#x3D;&quot;weight&quot;&gt;
&lt;th mat-header-cell *matHeaderCellDef&gt;Time&lt;/th&gt;
&lt;td mat-cell *matCellDef&#x3D;&quot;let element&quot;&gt;{{ element.time }}&lt;/td&gt;
&lt;/ng-container&gt;
&lt;!-- Time Column --&gt;
&lt;ng-container matColumnDef&#x3D;&quot;current-price&quot;&gt;
&lt;th mat-header-cell *matHeaderCellDef&gt;Current Price&lt;/th&gt;
&lt;td mat-cell *matCellDef&#x3D;&quot;let element&quot;&gt;
{{ element.currentPrice }}
&lt;/td&gt;
&lt;/ng-container&gt;
&lt;tr mat-header-row *matHeaderRowDef&#x3D;&quot;displayedColumnsStocks&quot;&gt;&lt;/tr&gt;
&lt;tr
mat-row
*matRowDef&#x3D;&quot;let row; columns: displayedColumnsStocks&quot;
&gt;&lt;/tr&gt;
&lt;/table&gt;
&lt;/div&gt;
&lt;/mat-card&gt;
&lt;/div&gt;
&lt;/mat-grid-tile&gt;
&lt;!-- Depot Overview --&gt;
&lt;mat-grid-tile colspan&#x3D;&quot;1&quot; rowspan&#x3D;&quot;1&quot; class&#x3D;&quot;right-side&quot;&gt;
&lt;div class&#x3D;&quot;depotOverview&quot;&gt;
&lt;div class&#x3D;&quot;heading fix-right-side&quot;&gt;
&lt;div class&#x3D;&quot;vertical-center&quot;&gt;Depot&lt;/div&gt;
&lt;/div&gt;
&lt;mat-card class&#x3D;&quot;placeholderRHS content-container&quot;&gt;
&lt;div class&#x3D;&quot;content&quot;&gt;
&lt;div class&#x3D;&quot;row&quot;&gt;
&lt;div class&#x3D;&quot;col-md-4&quot;&gt;
&lt;div class&#x3D;&quot;value-set&quot;&gt;
&lt;h3&gt;Portfolio Value&lt;/h3&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class&#x3D;&quot;col-md-4&quot;&gt;
&lt;div class&#x3D;&quot;value-set&quot;&gt;
&lt;h3&gt;Portfolio Cost&lt;/h3&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class&#x3D;&quot;col-md-4&quot;&gt;
&lt;div class&#x3D;&quot;value-set&quot;&gt;
&lt;h3&gt;Portfolio Profit&lt;/h3&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;br /&gt;
&lt;div class&#x3D;&quot;row&quot;&gt;
&lt;div class&#x3D;&quot;col-6 col-sm-4&quot;&gt;
&lt;mat-icon&gt;savings&lt;/mat-icon
&gt;&lt;span class&#x3D;&quot;money&quot;&gt;{{ depotCurrentValue.toFixed(2) }}&lt;/span&gt;
&lt;/div&gt;
&lt;div class&#x3D;&quot;col-6 col-sm-4&quot;&gt;
&lt;mat-icon&gt;paid&lt;/mat-icon
&gt;&lt;span class&#x3D;&quot;money&quot;&gt;{{ depotCost.toFixed(2) }}&lt;/span&gt;
&lt;/div&gt;
&lt;div class&#x3D;&quot;col-6 col-sm-4&quot;&gt;
&lt;mat-icon&gt;account_balance&lt;/mat-icon
&gt;&lt;span
class&#x3D;&quot;money&quot;
[ngClass]&#x3D;&quot;{ green: profit &gt;&#x3D; 0, red: profit &lt; 0 }&quot;
&gt;{{ profit.toFixed(2) }}&lt;/span
&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/mat-card&gt;
&lt;/div&gt;
&lt;/mat-grid-tile&gt;
&lt;!-- Transaktions --&gt;
&lt;mat-grid-tile colspan&#x3D;&quot;1&quot; rowspan&#x3D;&quot;1&quot; class&#x3D;&quot;right-side&quot;&gt;
&lt;div class&#x3D;&quot;depotOverviewDown&quot;&gt;
&lt;div class&#x3D;&quot;heading fix-right-side&quot;&gt;
&lt;div class&#x3D;&quot;vertical-center&quot;&gt;Transactions&lt;/div&gt;
&lt;span class&#x3D;&quot;spacer&quot;&gt;&lt;/span&gt;
&lt;button
mat-icon-button
class&#x3D;&quot;add-icon&quot;
aria-label&#x3D;&quot;Example icon-button with heart icon&quot;
[disableRipple]&#x3D;&quot;true&quot;
(click)&#x3D;&quot;openDialog()&quot;
&gt;
&lt;mat-icon&gt;add&lt;/mat-icon&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;mat-card class&#x3D;&quot;placeholderRHS&quot;
&gt;&lt;div class&#x3D;&quot;stockTable&quot;&gt;
&lt;table mat-table [dataSource]&#x3D;&quot;dataSourceTransactions&quot;&gt;
&lt;!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition&quot; --&gt;
&lt;!-- Position Column --&gt;
&lt;ng-container matColumnDef&#x3D;&quot;position&quot;&gt;
&lt;th mat-header-cell *matHeaderCellDef&gt;Count&lt;/th&gt;
&lt;td mat-cell *matCellDef&#x3D;&quot;let element&quot;&gt;{{ element.count }}&lt;/td&gt;
&lt;/ng-container&gt;
&lt;!-- Comment Column --&gt;
&lt;ng-container matColumnDef&#x3D;&quot;comment&quot;&gt;
&lt;th mat-header-cell *matHeaderCellDef&gt;Comment&lt;/th&gt;
&lt;td mat-cell *matCellDef&#x3D;&quot;let element&quot;&gt;{{ element.comment }}&lt;/td&gt;
&lt;/ng-container&gt;
&lt;!-- Name Column --&gt;
&lt;ng-container matColumnDef&#x3D;&quot;name&quot;&gt;
&lt;th mat-header-cell *matHeaderCellDef&gt;Price&lt;/th&gt;
&lt;td mat-cell *matCellDef&#x3D;&quot;let element&quot;&gt;{{ element.price }}&lt;/td&gt;
&lt;/ng-container&gt;
&lt;!-- Weight Column --&gt;
&lt;ng-container matColumnDef&#x3D;&quot;weight&quot;&gt;
&lt;th mat-header-cell *matHeaderCellDef&gt;ISIN&lt;/th&gt;
&lt;td mat-cell *matCellDef&#x3D;&quot;let element&quot;&gt;{{ element.isin }}&lt;/td&gt;
&lt;/ng-container&gt;
&lt;!-- Symbol Column --&gt;
&lt;ng-container matColumnDef&#x3D;&quot;symbol&quot;&gt;
&lt;th mat-header-cell *matHeaderCellDef&gt;Time&lt;/th&gt;
&lt;td mat-cell *matCellDef&#x3D;&quot;let element&quot;&gt;{{ element.time }}&lt;/td&gt;
&lt;/ng-container&gt;
&lt;tr mat-header-row *matHeaderRowDef&#x3D;&quot;displayedColumns&quot;&gt;&lt;/tr&gt;
&lt;tr mat-row *matRowDef&#x3D;&quot;let row; columns: displayedColumns&quot;&gt;&lt;/tr&gt;
&lt;/table&gt;&lt;/div
&gt;&lt;/mat-card&gt;
&lt;/div&gt;
&lt;/mat-grid-tile&gt;
&lt;/mat-grid-list&gt;
</code></pre>
</div>
<div class="tab-pane fade " id="c-styleData">
<p class="comment">
<code>./dashboard.component.scss</code>
</p>
<pre class="line-numbers"><code class="language-scss">// left gird
.stockOverview {
height: 100%;
width: 100%;
margin-top: 10%;
margin-left: 10%;
}
//right grids
.depotOverview {
height: 100%;
width: 100%;
margin-top: 10%;
margin-left: 5%;
margin-right: 10%;
text-align: center;
}
.depotOverviewDown {
height: 100%;
width: 100%;
margin-left: 5%;
margin-right: 10%;
}
.stockTable {
overflow: auto;
height: 100%;
width: 100%;
}
.stockTableLHS {
overflow: auto;
height: 83%;
width: 100%;
}
.heading {
font-size: xx-large;
height: 10%;
width: 100%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.fix-right-side {
height: 20%;
}
.vertical-center {
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.spacer {
flex-grow: 1;
}
.add-icon {
transform: scale(2);
outline: none !important;
}
.right-side {
margin-left: 2.5%;
}
table {
width: 100%;
}
.placeholder {
height: 100%;
}
.placeholderRHS {
height: 80%;
}
.mat-ripple-element {
display: none !important;
}
.money {
margin-left: 2vw;
}
.green {
color: green;
}
.red {
color: red;
}
.row {
height: 20%;
}
.content {
height: inherit;
}
.content-container {
width: 100%;
display: grid;
align-items: center;
}
</code></pre>
</div>
<div class="tab-pane fade " id="c-tree">
<div id="tree-container"></div>
<div class="tree-legend">
<div class="title">
<b>Legend</b>
</div>
<div>
<div class="color htmlelement"></div><span>Html element</span>
</div>
<div>
<div class="color component"></div><span>Component</span>
</div>
<div>
<div class="color directive"></div><span>Html element with directive</span>
</div>
</div>
</div>
</div>
<script src="../js/libs/vis.min.js"></script>
<script src="../js/libs/htmlparser.js"></script>
<script src="../js/libs/deep-iterator.js"></script>
<script>
var COMPONENT_TEMPLATE = '<div><mat-grid-list cols="2" rowHeight="45%"> <!-- Stocks --> <mat-grid-tile colspan="1" rowspan="2"> <div class="stockOverview"> <div class="heading"> <div class="vertical-center">Stocks</div> </div> <mat-card class="placeholder"> <div class="stockTableLHS"> <table mat-table [dataSource]="dataSourceStocks"> <!--- Note that these columns can be defined in any order. The actual rendered columns are set as a property on the row definition" --> <!-- Symbol Column --> <ng-container matColumnDef="position"> <th mat-header-cell *matHeaderCellDef>Symbol</th> <td mat-cell *matCellDef="let element">{{ element.symbol }}</td> </ng-container> <!-- Count Column --> <ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDef>Count</th> <td mat-cell *matCellDef="let element">{{ element.count }}</td> </ng-container> <!-- Time Column --> <ng-container matColumnDef="weight"> <th mat-header-cell *matHeaderCellDef>Time</th> <td mat-cell *matCellDef="let element">{{ element.time }}</td> </ng-container> <!-- Time Column --> <ng-container matColumnDef="current-price"> <th mat-header-cell *matHeaderCellDef>Current Price</th> <td mat-cell *matCellDef="let element"> {{ element.currentPrice }} </td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumnsStocks"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumnsStocks" ></tr> </table> </div> </mat-card> </div> </mat-grid-tile> <!-- Depot Overview --> <mat-grid-tile colspan="1" rowspan="1" class="right-side"> <div class="depotOverview"> <div class="heading fix-right-side"> <div class="vertical-center">Depot</div> </div> <mat-card class="placeholderRHS content-container"> <div class="content"> <div class="row"> <div class="col-md-4"> <div class="value-set"> <h3>Portfolio Value</h3> </div> </div> <div class="col-md-4"> <div class="value-set"> <h3>Portfolio Cost</h3> </div> </div> <div class="col-md-4"> <div class="value-set"> <h3>Portfolio Profit</h3> </div> </div> </div> <br /> <div class="row"> <div class="col-6 col-sm-4"> <mat-icon>savings</mat-icon ><span class="money">{{ depotCurrentValue.toFixed(2) }}</span> </div> <div class="col-6 col-sm-4"> <mat-icon>paid</mat-icon ><span class="money">{{ depotCost.toFixed(2) }}</span> </div> <div class="col-6 col-sm-4"> <mat-icon>account_balance</mat-icon ><span class="money" [ngClass]="{ green: profit >= 0, red: profit < 0 }" >{{ profit.toFixed(2) }}</span > </div> </div> </div> </mat-card> </div> </mat-grid-tile> <!-- Transaktions --> <mat-grid-tile colspan="1" rowspan="1" class="right-side"> <div class="depotOverviewDown"> <div class="heading fix-right-side"> <div class="vertical-center">Transactions</div> <span class="spacer"></span> <button mat-icon-button class="add-icon" aria-label="Example icon-button with heart icon" [disableRipple]="true" (click)="openDialog()" > <mat-icon>add</mat-icon> </button> </div> <mat-card class="placeholderRHS" ><div class="stockTable"> <table mat-table [dataSource]="dataSourceTransactions"> <!--- Note that these columns can be d
var COMPONENTS = [{'name': 'AppComponent', 'selector': 'app-root'},{'name': 'BotSettingsComponent', 'selector': 'app-bot-settings'},{'name': 'ConfirmationDialogComponent', 'selector': 'app-confirmation-dialog'},{'name': 'DashboardComponent', 'selector': 'app-dashboard'},{'name': 'HeaderComponent', 'selector': 'app-header'},{'name': 'HelpDialogComponent', 'selector': 'app-help-dialog'},{'name': 'LoginComponent', 'selector': 'app-login'},{'name': 'ProfileComponent', 'selector': 'app-profile'},{'name': 'RegisterComponent', 'selector': 'app-register'},{'name': 'UserDialogComponent', 'selector': 'app-user-dialog'}];
var DIRECTIVES = [];
var ACTUAL_COMPONENT = {'name': 'DashboardComponent'};
</script>
<script src="../js/tree.js"></script>
</div><div class="search-results">
<div class="has-results">
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
<ul class="search-results-list"></ul>
</div>
<div class="no-results">
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
</div>
</div>
</div>
<!-- END CONTENT -->
</div>
</div>
<label class="dark-mode-switch">
<input type="checkbox">
<span class="slider">
<svg class="slider-icon" viewBox="0 0 24 24" fill="none" height="20" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg">
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
</svg>
</span>
</label>
<script>
var COMPODOC_CURRENT_PAGE_DEPTH = 1;
var COMPODOC_CURRENT_PAGE_CONTEXT = 'component';
var COMPODOC_CURRENT_PAGE_URL = 'DashboardComponent.html';
var MAX_SEARCH_RESULTS = 15;
</script>
<script src="../js/libs/custom-elements.min.js"></script>
<script src="../js/libs/lit-html.js"></script>
<script src="../js/menu-wc.js" defer></script>
<script nomodule src="../js/menu-wc_es5.js" defer></script>
<script src="../js/libs/bootstrap-native.js"></script>
<script src="../js/libs/es6-shim.min.js"></script>
<script src="../js/libs/EventDispatcher.js"></script>
<script src="../js/libs/promise.min.js"></script>
<script src="../js/libs/zepto.min.js"></script>
<script src="../js/compodoc.js"></script>
<script src="../js/tabs.js"></script>
<script src="../js/menu.js"></script>
<script src="../js/libs/clipboard.min.js"></script>
<script src="../js/libs/prism.js"></script>
<script src="../js/sourceCode.js"></script>
<script src="../js/search/search.js"></script>
<script src="../js/search/lunr.min.js"></script>
<script src="../js/search/search-lunr.js"></script>
<script src="../js/search/search_index.js"></script>
<script src="../js/lazy-load-graphs.js"></script>
</body>
</html>
Reference in New Issue Copy Permalink