sudacode/ghostfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Feature/add line chart to historical data view (#555)

Browse Source 
* Add line chart

* Update changelog
This commit is contained in:
Thomas Kaul 2021-12-18 16:43:34 +01:00 committed by GitHub
parent 8b9379f5ce
commit aca0d77e91
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 29 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
CHANGELOG.md
View File

@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## Unreleased
### Added
- Added a line chart to the historical data view in the admin control panel
## 1.91.0 - 18.12.2021
### Changed

8
apps/client/src/app/components/admin-market-data-detail/admin-market-data-detail.component.html
View File

@ -1,4 +1,10 @@
<div class="py-2">
<div>
<gf-line-chart
class="mb-4"
[historicalDataItems]="historicalDataItems"
[showXAxis]="true"
[showYAxis]="true"
></gf-line-chart>
<div *ngFor="let itemByMonth of marketDataByMonth | keyvalue" class="d-flex">
<div class="date px-1 text-nowrap">{{ itemByMonth.key }}</div>
<div class="align-items-center d-flex flex-grow-1 px-1">

4
apps/client/src/app/components/admin-market-data-detail/admin-market-data-detail.component.scss
View File

@ -14,6 +14,10 @@
margin-right: 0.25rem;
width: 0.5rem;
&:hover {
opacity: 0.8;
}
&.valid {
background-color: var(--danger);
}

8
apps/client/src/app/components/admin-market-data-detail/admin-market-data-detail.component.ts
View File

@ -8,6 +8,7 @@ import {
import { MatDialog } from '@angular/material/dialog';
import { DEFAULT_DATE_FORMAT } from '@ghostfolio/common/config';
import { DATE_FORMAT } from '@ghostfolio/common/helper';
import { LineChartItem } from '@ghostfolio/ui/line-chart/interfaces/line-chart.interface';
import { DataSource, MarketData } from '@prisma/client';
import { format, isBefore, isValid, parse } from 'date-fns';
import { DeviceDetectorService } from 'ngx-device-detector';
@ -29,6 +30,7 @@ export class AdminMarketDataDetailComponent implements OnChanges, OnInit {
public days = Array(31);
public defaultDateFormat = DEFAULT_DATE_FORMAT;
public deviceType: string;
public historicalDataItems: LineChartItem[];
public marketDataByMonth: {
[yearMonth: string]: { [day: string]: MarketData & { day: number } };
} = {};
@ -45,6 +47,12 @@ export class AdminMarketDataDetailComponent implements OnChanges, OnInit {
public ngOnInit() {}
public ngOnChanges() {
this.historicalDataItems = this.marketData.map((marketDataItem) => {
return {
date: format(marketDataItem.date, DATE_FORMAT),
value: marketDataItem.marketPrice
};
});
this.marketDataByMonth = {};
for (const marketDataItem of this.marketData) {

3
apps/client/src/app/components/admin-market-data-detail/admin-market-data-detail.module.ts
View File

@ -1,5 +1,6 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { GfLineChartModule } from '@ghostfolio/ui/line-chart/line-chart.module';
import { AdminMarketDataDetailComponent } from './admin-market-data-detail.component';
import { GfMarketDataDetailDialogModule } from './market-data-detail-dialog/market-data-detail-dialog.module';
@ -7,7 +8,7 @@ import { GfMarketDataDetailDialogModule } from './market-data-detail-dialog/mark
@NgModule({
declarations: [AdminMarketDataDetailComponent],
exports: [AdminMarketDataDetailComponent],
imports: [CommonModule, GfMarketDataDetailDialogModule],
imports: [CommonModule, GfLineChartModule, GfMarketDataDetailDialogModule],
providers: [],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

5
apps/client/src/app/components/admin-market-data/admin-market-data.html
View File

@ -4,7 +4,6 @@
<table class="gf-table w-100">
<thead>
<tr class="mat-header-row">
<th class="mat-header-cell px-1 py-2 text-right" i18n>#</th>
<th class="mat-header-cell px-1 py-2" i18n>Symbol</th>
<th class="mat-header-cell px-1 py-2" i18n>Data Source</th>
<th class="mat-header-cell px-1 py-2" i18n>First Transaction</th>
@ -17,7 +16,6 @@
class="cursor-pointer mat-row"
(click)="setCurrentSymbol(item.symbol)"
>
<td class="mat-cell px-1 py-2 text-right">{{ i + 1 }}</td>
<td class="mat-cell px-1 py-2">{{ item.symbol }}</td>
<td class="mat-cell px-1 py-2">{{ item.dataSource}}</td>
<td class="mat-cell px-1 py-2">
@ -44,8 +42,7 @@
</td>
</tr>
<tr *ngIf="currentSymbol === item.symbol" class="mat-row">
<td></td>
<td colspan="4">
<td class="p-1" colspan="4">
<gf-admin-market-data-detail
[dataSource]="item.dataSource"
[marketData]="marketDataDetails"

2
apps/client/src/app/components/admin-users/admin-users.html
View File

@ -5,7 +5,7 @@
<table class="gf-table">
<thead>
<tr class="mat-header-row">
<th class="mat-header-cell px-1 py-2 text-right" i18n>#</th>
<th class="mat-header-cell px-1 py-2 text-right">#</th>
<th class="mat-header-cell px-1 py-2" i18n>User</th>
<th class="mat-header-cell px-1 py-2 text-right" i18n>
Registration