mirror of https://github.com/ghostfolio/ghostfolio
Thomas Kaul
2 years ago
committed by
GitHub
GitHub
16 changed files with 290 additions and 37 deletions
@ -0,0 +1,20 @@ |
|||||
|
import { NgModule } from '@angular/core'; |
||||
|
import { RouterModule, Routes } from '@angular/router'; |
||||
|
import { AuthGuard } from '@ghostfolio/client/core/auth.guard'; |
||||
|
|
||||
|
import { OpenPageComponent } from './open-page.component'; |
||||
|
|
||||
|
const routes: Routes = [ |
||||
|
{ |
||||
|
canActivate: [AuthGuard], |
||||
|
component: OpenPageComponent, |
||||
|
path: '', |
||||
|
title: $localize`Open Startup` |
||||
|
} |
||||
|
]; |
||||
|
|
||||
|
@NgModule({ |
||||
|
imports: [RouterModule.forChild(routes)], |
||||
|
exports: [RouterModule] |
||||
|
}) |
||||
|
export class OpenPageRoutingModule {} |
||||
@ -0,0 +1,29 @@ |
|||||
|
import { Component, OnDestroy, OnInit } from '@angular/core'; |
||||
|
import { DataService } from '@ghostfolio/client/services/data.service'; |
||||
|
import { Statistics } from '@ghostfolio/common/interfaces/statistics.interface'; |
||||
|
import { Subject } from 'rxjs'; |
||||
|
|
||||
|
@Component({ |
||||
|
host: { class: 'page' }, |
||||
|
selector: 'gf-open-page', |
||||
|
styleUrls: ['./open-page.scss'], |
||||
|
templateUrl: './open-page.html' |
||||
|
}) |
||||
|
export class OpenPageComponent implements OnDestroy, OnInit { |
||||
|
public statistics: Statistics; |
||||
|
|
||||
|
private unsubscribeSubject = new Subject<void>(); |
||||
|
|
||||
|
public constructor(private dataService: DataService) { |
||||
|
const { statistics } = this.dataService.fetchInfo(); |
||||
|
|
||||
|
this.statistics = statistics; |
||||
|
} |
||||
|
|
||||
|
public ngOnInit() {} |
||||
|
|
||||
|
public ngOnDestroy() { |
||||
|
this.unsubscribeSubject.next(); |
||||
|
this.unsubscribeSubject.complete(); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,111 @@ |
|||||
|
<div class="container"> |
||||
|
<div class="row"> |
||||
|
<div class="col"> |
||||
|
<h3 class="d-none d-sm-block mb-3 text-center">Open Startup</h3> |
||||
|
<div class="intro-container"> |
||||
|
<p> |
||||
|
At Ghostfolio, transparency is at the core of our values. We openly |
||||
|
share aggregated key metrics of our platform’s performance and publish |
||||
|
the source code as |
||||
|
<a |
||||
|
href="https://github.com/ghostfolio/ghostfolio" |
||||
|
title="Contributors to Ghostfolio" |
||||
|
>open source software</a |
||||
|
> |
||||
|
(OSS). |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="row"> |
||||
|
<div class="col"> |
||||
|
<mat-card appearance="outlined"> |
||||
|
<mat-card-content> |
||||
|
<div class="row"> |
||||
|
<div class="col-xs-12 col-md-4 my-2"> |
||||
|
<gf-value |
||||
|
size="large" |
||||
|
subLabel="(Last 24 hours)" |
||||
|
[value]="statistics?.activeUsers1d ?? '-'" |
||||
|
>Active Users</gf-value |
||||
|
> |
||||
|
</div> |
||||
|
<div class="col-xs-12 col-md-4 my-2"> |
||||
|
<gf-value |
||||
|
size="large" |
||||
|
subLabel="(Last 30 days)" |
||||
|
[value]="statistics?.newUsers30d ?? '-'" |
||||
|
>New Users</gf-value |
||||
|
> |
||||
|
</div> |
||||
|
<div class="col-xs-12 col-md-4 my-2"> |
||||
|
<gf-value |
||||
|
size="large" |
||||
|
subLabel="(Last 30 days)" |
||||
|
[value]="statistics?.activeUsers30d ?? '-'" |
||||
|
>Active Users</gf-value |
||||
|
> |
||||
|
</div> |
||||
|
<div class="col-xs-12 col-md-4 my-2"> |
||||
|
<a class="d-block" href="https://ghostfolio.slack.com"> |
||||
|
<gf-value |
||||
|
size="large" |
||||
|
[value]="statistics?.slackCommunityUsers ?? '-'" |
||||
|
>Users in Slack community</gf-value |
||||
|
> |
||||
|
</a> |
||||
|
</div> |
||||
|
<div class="col-xs-12 col-md-4 my-2"> |
||||
|
<a |
||||
|
class="d-block" |
||||
|
href="https://github.com/ghostfolio/ghostfolio/graphs/contributors" |
||||
|
> |
||||
|
<gf-value |
||||
|
size="large" |
||||
|
[value]="statistics?.gitHubContributors ?? '-'" |
||||
|
>Contributors on GitHub</gf-value |
||||
|
> |
||||
|
</a> |
||||
|
</div> |
||||
|
<div class="col-xs-12 col-md-4 my-2"> |
||||
|
<a |
||||
|
class="d-block" |
||||
|
href="https://github.com/ghostfolio/ghostfolio/stargazers" |
||||
|
> |
||||
|
<gf-value |
||||
|
size="large" |
||||
|
[value]="statistics?.gitHubStargazers ?? '-'" |
||||
|
>Stars on GitHub</gf-value |
||||
|
> |
||||
|
</a> |
||||
|
</div> |
||||
|
<div class="col-xs-12 col-md-4 my-2"> |
||||
|
<a |
||||
|
class="d-block" |
||||
|
href="https://hub.docker.com/r/ghostfolio/ghostfolio" |
||||
|
> |
||||
|
<gf-value |
||||
|
size="large" |
||||
|
[value]="statistics?.dockerHubPulls ?? '-'" |
||||
|
>Pulls on Docker Hub</gf-value |
||||
|
> |
||||
|
</a> |
||||
|
</div> |
||||
|
<div class="col-xs-12 col-md-4 my-2"> |
||||
|
<a class="d-block" href="https://status.ghostfol.io"> |
||||
|
<gf-value |
||||
|
size="large" |
||||
|
[isPercent]="true" |
||||
|
[precision]="2" |
||||
|
[value]="statistics?.uptime ?? '-'" |
||||
|
>Uptime</gf-value |
||||
|
> |
||||
|
</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</mat-card-content> |
||||
|
</mat-card> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,14 @@ |
|||||
|
import { CommonModule } from '@angular/common'; |
||||
|
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; |
||||
|
import { MatCardModule } from '@angular/material/card'; |
||||
|
import { GfValueModule } from '@ghostfolio/ui/value'; |
||||
|
|
||||
|
import { OpenPageRoutingModule } from './open-page-routing.module'; |
||||
|
import { OpenPageComponent } from './open-page.component'; |
||||
|
|
||||
|
@NgModule({ |
||||
|
declarations: [OpenPageComponent], |
||||
|
imports: [CommonModule, GfValueModule, MatCardModule, OpenPageRoutingModule], |
||||
|
schemas: [CUSTOM_ELEMENTS_SCHEMA] |
||||
|
}) |
||||
|
export class OpenPageModule {} |
||||
@ -0,0 +1,19 @@ |
|||||
|
:host { |
||||
|
color: rgb(var(--dark-primary-text)); |
||||
|
display: block; |
||||
|
|
||||
|
.intro-container { |
||||
|
a { |
||||
|
color: rgba(var(--palette-primary-500), 1); |
||||
|
font-weight: 500; |
||||
|
|
||||
|
&:hover { |
||||
|
color: rgba(var(--palette-primary-300), 1); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
:host-context(.is-dark-theme) { |
||||
|
color: rgb(var(--light-primary-text)); |
||||
|
} |
||||
Loading…
Reference in new issue