1 files changed, 38 insertions, 0 deletions

diff --git a/client/src/app/+stats/video/video-stats.component.html b/client/src/app/+stats/video/video-stats.component.html
new file mode 100644
index 000000000..ef43c9fba
--- /dev/null
+++ b/client/src/app/+stats/video/video-stats.component.html
@@ -0,0 +1,38 @@
+<div class="margin-content">
+  <h1 class="title-page title-page-single" i18n>Stats for {{ video.name }}</h1>
+
+  <div class="overall-stats-embed">
+    <div class="overall-stats">
+      <div *ngFor="let card of overallStatCards" class="card overall-stats-card">
+        <div class="label">{{ card.label }}</div>
+        <div class="value">{{ card.value }}</div>
+        <div *ngIf="card.moreInfo" class="more-info">{{ card.moreInfo }}</div>
+      </div>
+    </div>
+
+    <my-embed [video]="video"></my-embed>
+  </div>
+
+  <div class="timeserie">
+    <div ngbNav #nav="ngbNav" [activeId]="activeGraphId" (activeIdChange)="onChartChange($event)" class="nav-tabs">
+
+      <ng-container *ngFor="let availableChart of availableCharts" [ngbNavItem]="availableChart.id">
+        <a ngbNavLink i18n>
+          <span>{{ availableChart.label }}</span>
+        </a>
+
+        <ng-template ngbNavContent>
+          <div [ngStyle]="{ 'min-height': chartHeight }">
+            <p-chart
+              *ngIf="chartOptions[availableChart.id]"
+              [height]="chartHeight" [width]="chartWidth"
+              [type]="chartOptions[availableChart.id].type" [options]="chartOptions[availableChart.id].options" [data]="chartOptions[availableChart.id].data"
+            ></p-chart>
+          </div>
+        </ng-template>
+      </ng-container>
+    </div>
+
+    <div [ngbNavOutlet]="nav"></div>
+  </div>
+</div>