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