Merge pull request #3 from GDG-Lille/feat/add-metrics

Feat/add metrics

package.json

@@ -1,6 +1,6 @@
 {
   "name": "twall",
-  "version": "0.0.0",
+  "version": "1.0.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --proxy-config proxy.conf.json",
@@ -23,6 +23,7 @@
     "@angular/platform-browser": "^6.0.0",
     "@angular/platform-browser-dynamic": "^6.0.0",
     "@angular/router": "^6.0.0",
+    "@swimlane/ngx-charts": "^8.0.0",
     "core-js": "^2.5.4",
     "firebase": "^4.13.1",
     "hammerjs": "^2.0.8",

src/app/tweets/components/tweet-card/tweet-card.component.css

@@ -9,28 +9,22 @@
   overflow: hidden;
 }
 
+.tweet-card .subtitle .time {
+  font-size: 10px;
+}
+
 .tweet-card .content {
   font-size: 18px;
 }
 
 .tweet-card .footer {
-  display: flex;
-}
-
-.tweet-card .footer div.column {
-  display: flex;
-  flex-direction: column;
+  padding-top: 10px;
 }
 
-.tweet-card .footer div.column.time {
-  flex: 1;
-  margin-left: 20px;
+.tweet-card .footer .icons {
   display: flex;
   align-items: center;
-}
-
-.tweet-card .footer div.column .icon + .icon {
-  margin-top: 10px
+  justify-content: space-around;
 }
 
 .tweet-card .footer .favorite {

src/app/tweets/components/tweet-card/tweet-card.component.html

@@ -2,13 +2,16 @@
   <mat-card-title-group>
     <img [src]="tweet.user.profile_image_url_https" alt="" mat-card-avatar/>
     <mat-card-title class="title">{{ tweet.user.name }}</mat-card-title>
-    <mat-card-subtitle>@{{ tweet.user.screen_name }}</mat-card-subtitle>
+    <mat-card-subtitle class="subtitle">
+      <div class="screen-name">@{{ tweet.user.screen_name }}</div>
+      <div class="time">{{ tweet.created_at | time }}</div>
+    </mat-card-subtitle>
   </mat-card-title-group>
   <mat-card-content class="content">
     <p>{{ tweet.text }}</p>
   </mat-card-content>
   <div class="footer">
-    <div class="column">
+    <div class="icons">
       <mat-icon
         class="icon retweet"
         [matBadge]="tweet.retweet_count"
@@ -22,9 +25,5 @@
         favorite
       </mat-icon>
     </div>
-    <div class="column time">
-      <mat-icon>access_time</mat-icon>
-      {{ tweet.created_at | time }}
-    </div>
   </div>
 </mat-card>

src/app/tweets/components/tweet-metrics/tweet-metrics.component.css

@@ -0,0 +1,15 @@
+.tweet-metrics .total {
+  position: absolute;
+  bottom: 20px;
+  right: 30px;
+  width: 50px;
+  height: 50px;
+  background-color: white;
+  border-radius: 50%;
+  border: 1px solid whitesmoke;
+
+  font-size: 30px;
+  font-weight: bold;
+  text-align: center;
+  line-height: 50px;
+}

src/app/tweets/components/tweet-metrics/tweet-metrics.component.html

@@ -0,0 +1,9 @@
+<div class="tweet-metrics mat-typography">
+  <ngx-charts-area-chart
+    [results]="metrics"
+    [view]="view"
+    [scheme]="scheme"
+    [tooltipDisabled]="true">
+  </ngx-charts-area-chart>
+  <div class="total">{{ totalOfTweets }}</div>
+</div>

src/app/tweets/components/tweet-metrics/tweet-metrics.component.spec.ts

@@ -0,0 +1,25 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {TweetMetricsComponent} from './tweet-metrics.component';
+
+describe('TweetMetricsComponent', () => {
+  let component: TweetMetricsComponent;
+  let fixture: ComponentFixture<TweetMetricsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [TweetMetricsComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TweetMetricsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/tweets/components/tweet-metrics/tweet-metrics.component.ts

@@ -0,0 +1,35 @@
+import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';
+import {Metric} from '../../shared/domains/metric';
+
+@Component({
+  selector: 'app-tweet-metrics',
+  templateUrl: './tweet-metrics.component.html',
+  styleUrls: ['./tweet-metrics.component.css']
+})
+export class TweetMetricsComponent implements OnInit, OnChanges {
+
+  @Input() public width: number;
+  @Input() public height: number;
+  @Input() public metrics: Array<Metric>;
+
+  public view = [];
+  public scheme: any;
+  public totalOfTweets: number;
+
+  ngOnInit() {
+    this.view.push(this.width, this.height);
+
+    this.scheme = {};
+    this.scheme.domain = [];
+    this.scheme.domain.push('#0E6993');
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.metrics.currentValue !== undefined) {
+      this.metrics = changes.metrics.currentValue;
+      this.totalOfTweets = 0;
+      this.metrics[0].series.forEach(serie => this.totalOfTweets += serie.value);
+    }
+  }
+
+}

src/app/tweets/pages/tweets/tweets.component.css

@@ -1,9 +1,26 @@
 .tweets-list {
-  padding: 8px;
-  column-count: 4;
-  background-color: whitesmoke;
+  margin: 8px;
+  display: flex;
+  flex-direction: row;
+  min-height: 100%;
 }
 
-.tweets-list .cell {
-  display: inline-block;
+.tweets-list .column {
+  width: calc(100% / 4);
+}
+
+.tweets-list .column + .column {
+  margin-left: 8px;
+}
+
+.tweets-list .metrics {
+  position: fixed;
+  z-index: 1;
+  bottom: -10px;
+}
+
+.tweets-list .spinner {
+  position: absolute;
+  top: calc(50% - 50px);
+  left: calc(50% - 50px);
 }