Fix stats anchor link

7 files changed, 209 insertions, 24 deletions

diff --git a/client/src/app/+about/about-instance/about-instance.component.html b/client/src/app/+about/about-instance/about-instance.component.html
index fdd6157e5..f602ec1b5 100644
--- a/client/src/app/+about/about-instance/about-instance.component.html
+++ b/client/src/app/+about/about-instance/about-instance.component.html
@@ -210,6 +210,7 @@
 
   <div class="col" myPluginSelector pluginSelectorId="about-instance-statistics">
     <div class="anchor" id="statistics"></div>
+
     <a
       class="anchor-link"
       routerLink="/about/instance"
@@ -218,7 +219,8 @@
       (click)="onClickCopyLink(anchorLink)">
       <h2 i18n class="middle-title">STATISTICS</h2>
     </a>
-    <my-instance-statistics></my-instance-statistics>
+
+    <my-instance-statistics [serverStats]="serverStats"></my-instance-statistics>
   </div>
 </div>
 
diff --git a/client/src/app/+about/about-instance/about-instance.component.ts b/client/src/app/+about/about-instance/about-instance.component.ts
index e1501d7de..fc5214215 100644
--- a/client/src/app/+about/about-instance/about-instance.component.ts
+++ b/client/src/app/+about/about-instance/about-instance.component.ts
@@ -4,7 +4,7 @@ import { ActivatedRoute } from '@angular/router'
 import { Notifier, ServerService } from '@app/core'
 import { AboutHTML } from '@app/shared/shared-instance'
 import { copyToClipboard } from '@root-helpers/utils'
-import { HTMLServerConfig } from '@shared/models/server'
+import { HTMLServerConfig, ServerStats } from '@shared/models/server'
 import { ResolverData } from './about-instance.resolver'
 import { ContactAdminModalComponent } from './contact-admin-modal.component'
 
@@ -26,6 +26,8 @@ export class AboutInstanceComponent implements OnInit, AfterViewChecked {
 
   initialized = false
 
+  serverStats: ServerStats
+
   private serverConfig: HTMLServerConfig
 
   private lastScrollHash: string
@@ -50,7 +52,9 @@ export class AboutInstanceComponent implements OnInit, AfterViewChecked {
   }
 
   ngOnInit () {
-    const { about, languages, categories, aboutHTML, descriptionElement }: ResolverData = this.route.snapshot.data.instanceData
+    const { about, languages, categories, aboutHTML, descriptionElement, serverStats }: ResolverData = this.route.snapshot.data.instanceData
+
+    this.serverStats = serverStats
 
     this.aboutHTML = aboutHTML
     this.descriptionElement = descriptionElement
diff --git a/client/src/app/+about/about-instance/about-instance.resolver.ts b/client/src/app/+about/about-instance/about-instance.resolver.ts
index 8818fc582..94388e71d 100644
--- a/client/src/app/+about/about-instance/about-instance.resolver.ts
+++ b/client/src/app/+about/about-instance/about-instance.resolver.ts
@@ -1,12 +1,14 @@
-import { forkJoin } from 'rxjs'
+import { forkJoin, Observable } from 'rxjs'
 import { map, switchMap } from 'rxjs/operators'
 import { Injectable } from '@angular/core'
 import { Resolve } from '@angular/router'
+import { ServerService } from '@app/core'
 import { CustomMarkupService } from '@app/shared/shared-custom-markup'
 import { AboutHTML, InstanceService } from '@app/shared/shared-instance'
-import { About } from '@shared/models/server'
+import { About, ServerStats } from '@shared/models/server'
 
 export type ResolverData = {
+  serverStats: ServerStats
   about: About
   languages: string[]
   categories: string[]
@@ -19,25 +21,47 @@ export class AboutInstanceResolver implements Resolve<any> {
 
   constructor (
     private instanceService: InstanceService,
-    private customMarkupService: CustomMarkupService
-
+    private customMarkupService: CustomMarkupService,
+    private serverService: ServerService
   ) {}
 
-  resolve () {
+  resolve (): Observable<ResolverData> {
+    return forkJoin([
+      this.buildInstanceAboutObservable(),
+      this.buildInstanceStatsObservable()
+    ]).pipe(
+      map(([
+        [ about, languages, categories, aboutHTML, { rootElement } ],
+        serverStats
+      ]) => {
+        return {
+          serverStats,
+          about,
+          languages,
+          categories,
+          aboutHTML,
+          descriptionElement: rootElement
+        }
+      })
+    )
+  }
+
+  private buildInstanceAboutObservable () {
     return this.instanceService.getAbout()
-               .pipe(
-                 switchMap(about => {
-                   return forkJoin([
-                     Promise.resolve(about),
-                     this.instanceService.buildTranslatedLanguages(about),
-                     this.instanceService.buildTranslatedCategories(about),
-                     this.instanceService.buildHtml(about),
-                     this.customMarkupService.buildElement(about.instance.description)
-                   ])
-                 }),
-                 map(([ about, languages, categories, aboutHTML, { rootElement } ]) => {
-                   return { about, languages, categories, aboutHTML, descriptionElement: rootElement } as ResolverData
-                 })
-               )
+      .pipe(
+        switchMap(about => {
+          return forkJoin([
+            Promise.resolve(about),
+            this.instanceService.buildTranslatedLanguages(about),
+            this.instanceService.buildTranslatedCategories(about),
+            this.instanceService.buildHtml(about),
+            this.customMarkupService.buildElement(about.instance.description)
+          ])
+        })
+      )
+  }
+
+  private buildInstanceStatsObservable () {
+    return this.serverService.getServerStats()
   }
 }
diff --git a/client/src/app/+about/about-instance/instance-statistics.component.html b/client/src/app/+about/about-instance/instance-statistics.component.html
new file mode 100644
index 000000000..68b209990
--- /dev/null
+++ b/client/src/app/+about/about-instance/instance-statistics.component.html
@@ -0,0 +1,101 @@
+<p i18n *ngIf="null === serverStats">Loading instance statistics...</p>
+
+<section *ngIf="null !== serverStats">
+  <h3 i18n>By users on this instance</h3>
+
+  <div class="row">
+    <div class="col-6 col-lg-4 col-xl-3">
+      <div class="card stat">
+        <div class="card-body">
+          <p class="stat-value">{{ serverStats.totalUsers | number }}</p>
+          <p class="stat-label" i18n>users</p>
+        </div>
+        <my-global-icon iconName="user"></my-global-icon>
+      </div>
+    </div>
+
+    <div class="col-6 col-lg-4 col-xl-3">
+      <div class="card stat">
+        <div class="card-body">
+          <p class="stat-value">{{ serverStats.totalLocalVideos | number }}</p>
+          <p class="stat-label" i18n>videos</p>
+        </div>
+        <my-global-icon iconName="film"></my-global-icon>
+      </div>
+    </div>
+
+    <div class="col-6 col-lg-4 col-xl-3">
+      <div class="card stat">
+        <div class="card-body">
+          <p class="stat-value">{{ serverStats.totalLocalVideoViews | number }}</p>
+          <p class="stat-label" i18n>views</p>
+        </div>
+        <my-global-icon iconName="eye-open"></my-global-icon>
+      </div>
+    </div>
+
+    <div class="col-6 col-lg-4 col-xl-3">
+      <div class="card stat">
+        <div class="card-body">
+          <p class="stat-value">{{ serverStats.totalLocalVideoComments | number }}</p>
+          <p class="stat-label" i18n>comments</p>
+        </div>
+        <my-global-icon iconName="message-circle"></my-global-icon>
+      </div>
+    </div>
+
+    <div class="col-6 col-lg-4 col-xl-3">
+      <div class="card stat">
+        <div class="card-body">
+          <p class="stat-value">{{ serverStats.totalLocalVideoFilesSize | bytes:1 }}</p>
+          <p class="stat-label" i18n>hosted video</p>
+        </div>
+        <my-global-icon iconName="home"></my-global-icon>
+      </div>
+    </div>
+  </div>
+
+  <h3 i18n>In this instance federation</h3>
+
+  <div class="row">
+    <div class="col-6 col-lg-4 col-xl-3">
+      <div class="card stat">
+        <div class="card-body">
+          <p class="stat-value">{{ serverStats.totalVideos | number }}</p>
+          <p class="stat-label" i18n>videos</p>
+        </div>
+        <my-global-icon iconName="film"></my-global-icon>
+      </div>
+    </div>
+
+    <div class="col-6 col-lg-4 col-xl-3">
+      <div class="card stat">
+        <div class="card-body">
+          <p class="stat-value">{{ serverStats.totalVideoComments | number }}</p>
+          <p class="stat-label" i18n>comments</p>
+        </div>
+        <my-global-icon iconName="message-circle"></my-global-icon>
+      </div>
+    </div>
+
+    <div class="col-6 col-lg-4 col-xl-3">
+      <div class="card stat">
+        <div class="card-body">
+          <p class="stat-value">{{ serverStats.totalInstanceFollowers | number }}</p>
+          <p class="stat-label" i18n>followers</p>
+        </div>
+        <my-global-icon iconName="share"></my-global-icon>
+      </div>
+    </div>
+
+    <div class="col-6 col-lg-4 col-xl-3">
+      <div class="card stat">
+        <div class="card-body">
+          <p class="stat-value">{{ serverStats.totalInstanceFollowing | number }}</p>
+          <p class="stat-label" i18n>following</p>
+        </div>
+        <my-global-icon iconName="globe"></my-global-icon>
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/client/src/app/+about/about-instance/instance-statistics.component.scss b/client/src/app/+about/about-instance/instance-statistics.component.scss
new file mode 100644
index 000000000..e1d489d28
--- /dev/null
+++ b/client/src/app/+about/about-instance/instance-statistics.component.scss
@@ -0,0 +1,39 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+
+h3 {
+  font-size: 1.25rem;
+}
+
+.stat {
+  text-align: center;
+  margin-bottom: 1em;
+  overflow: hidden;
+
+  .stat-value {
+    font-size: 2.25em;
+    line-height: 1em;
+    margin: 0;
+  }
+
+  .stat-label {
+    font-size: 1.15em;
+    margin: 0;
+  }
+
+  .card-body {
+    z-index: 2;
+  }
+}
+
+my-global-icon {
+  opacity: 0.12;
+  position: absolute;
+  left: 16px;
+  top: -24px;
+  width: 110px;
+
+  &.icon-bottom {
+    top: 4px;
+  }
+}
diff --git a/client/src/app/+about/about-instance/instance-statistics.component.ts b/client/src/app/+about/about-instance/instance-statistics.component.ts
new file mode 100644
index 000000000..ac6984438
--- /dev/null
+++ b/client/src/app/+about/about-instance/instance-statistics.component.ts
@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core'
+import { ServerStats } from '@shared/models/server'
+
+@Component({
+  selector: 'my-instance-statistics',
+  templateUrl: './instance-statistics.component.html',
+  styleUrls: [ './instance-statistics.component.scss' ]
+})
+export class InstanceStatisticsComponent {
+  @Input() serverStats: ServerStats
+}
diff --git a/client/src/app/+about/about.module.ts b/client/src/app/+about/about.module.ts
index 6a3d72290..2cdfdf822 100644
--- a/client/src/app/+about/about.module.ts
+++ b/client/src/app/+about/about.module.ts
@@ -3,6 +3,7 @@ import { AboutFollowsComponent } from '@app/+about/about-follows/about-follows.c
 import { AboutInstanceComponent } from '@app/+about/about-instance/about-instance.component'
 import { AboutInstanceResolver } from '@app/+about/about-instance/about-instance.resolver'
 import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-admin-modal.component'
+import { InstanceStatisticsComponent } from '@app/+about/about-instance/instance-statistics.component'
 import { AboutPeertubeComponent } from '@app/+about/about-peertube/about-peertube.component'
 import { SharedCustomMarkupModule } from '@app/shared/shared-custom-markup'
 import { SharedFormModule } from '@app/shared/shared-forms'
@@ -25,10 +26,13 @@ import { AboutComponent } from './about.component'
 
   declarations: [
     AboutComponent,
+
     AboutInstanceComponent,
+    ContactAdminModalComponent,
+    InstanceStatisticsComponent,
+
     AboutPeertubeComponent,
-    AboutFollowsComponent,
-    ContactAdminModalComponent
+    AboutFollowsComponent
   ],
 
   exports: [