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

* Add line chart

* Update changelog

CHANGELOG.md

@@ -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

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

@@ -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">

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

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

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

@@ -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) {

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

@@ -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]
 })

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

@@ -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 class="p-1" colspan="4">
-              <td colspan="4">
                 <gf-admin-market-data-detail
                   [dataSource]="item.dataSource"
                   [marketData]="marketDataDetails"

apps/client/src/app/components/admin-users/admin-users.html

@@ -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