Addresses #635 implemented statistic infobox similar to loklak

package.json

@@ -30,10 +30,12 @@
     "@ngrx/router-store": "^1.2.6",
     "@ngrx/store": "^2.2.2",
     "@ngrx/store-devtools": "^3.2.4",
+    "chart.js": "^2.6.0",
     "codecov.io": "^0.1.6",
     "core-js": "^2.4.1",
     "express": "^4.15.3",
     "ng2-bs3-modal": "^0.10.4",
+    "ng2-charts": "^1.6.0",
     "ngrx-store-freeze": "^0.1.9",
     "ngx-infinite-scroll": "^0.5.1",
     "reselect": "^3.0.1",

src/app/advancedsearch/advancedsearch.component.html

@@ -16,7 +16,6 @@ <h3>selected</h3></li>
               <input type="checkbox" checked>{{element.name}}  {{element.count}}
             </a>
           </li>
-
         </ul>
       </div>
 

src/app/app.component.spec.ts

@@ -29,8 +29,10 @@ import { DropdownComponent } from './dropdown/dropdown.component';
 import {IntelligenceComponent} from "./intelligence/intelligence.component";
 import {SpeechtotextComponent} from "./speechtotext/speechtotext.component";
 import {AutoCorrectComponent} from "./auto-correct/auto-correct.component";
+import {StatsboxComponent} from "./statsbox/statsbox.component";
 import {SpeechService} from "./services/speech.service";
 import {InfiniteScrollModule} from "ngx-infinite-scroll";
+import {ChartsModule} from "ng2-charts";
 
 describe('AppComponent', () => {
   beforeEach(() => {
@@ -43,6 +45,7 @@ describe('AppComponent', () => {
         FormsModule,
         HttpModule,
         JsonpModule,
+        ChartsModule,
         StoreModule.provideStore(reducer),
         StoreDevtoolsModule.instrumentOnlyWithExtension(),
     ],
@@ -65,7 +68,8 @@ describe('AppComponent', () => {
         DropdownComponent,
         IntelligenceComponent,
         SpeechtotextComponent,
-        AutoCorrectComponent
+        AutoCorrectComponent,
+        StatsboxComponent
       ],
       providers: [
         SpeechService

src/app/app.module.ts

@@ -40,10 +40,11 @@ import { IntelligenceComponent } from './intelligence/intelligence.component';
 import {IntelligenceService} from "./services/intelligence.service";
 import { SpeechtotextComponent } from './speechtotext/speechtotext.component';
 import { AutoCorrectComponent } from './auto-correct/auto-correct.component';
+import { StatsboxComponent } from './statsbox/statsbox.component';
 import {AutocorrectService} from "./services/autocorrect.service";
 import { SpeechSynthesisService } from './services/speech-synthesis.service';
 import {InfiniteScrollModule} from "ngx-infinite-scroll";
-
+import { ChartsModule } from 'ng2-charts/ng2-charts';
 const appRoutes: Routes = [
   {path: 'search', component: ResultsComponent},
   {path: '', component: IndexComponent},
@@ -81,6 +82,7 @@ const appRoutes: Routes = [
     IntelligenceComponent,
     SpeechtotextComponent,
     AutoCorrectComponent,
+    StatsboxComponent,
   ],
 
   imports: [
@@ -95,7 +97,8 @@ const appRoutes: Routes = [
     EffectsModule.run(ApiSearchEffects),
     EffectsModule.run(KnowledgeEffects),
     StoreDevtoolsModule.instrumentOnlyWithExtension(),
-    Ng2Bs3ModalModule
+    Ng2Bs3ModalModule,
+    ChartsModule
   ],
 
   providers: [

src/app/infobox/infobox.component.css

@@ -2,13 +2,13 @@
   /* Add shadows to create the "card" effect */
   border: 1px solid rgba(150,150,150,0.3);
   border-bottom-color: rgba(125,125,125,0.3);
-  margin-bottom: 16px;
   padding: 22px 22px 18px 22px;
   transition: 0.3s;
   width: 434px;
-  margin-top: 10%
+  margin-top: 3%
 }
 
+
 /* Add some padding inside the card container */
 .card-container {
   padding: 2px 16px;

src/app/not-found/not-found.component.spec.ts

@@ -1,37 +1,16 @@
-/* tslint:disable:no-unused-variable */
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { By, BrowserModule } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
 
 import { NotFoundComponent } from './not-found.component';
 import { RouterTestingModule } from '@angular/router/testing';
 import { CommonModule } from '@angular/common';
 import { HttpModule, JsonpModule } from '@angular/http';
 import { StoreModule } from '@ngrx/store';
-import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { reducer } from '../reducers/index';
-import { AppComponent } from '../app.component';
-import { NavbarComponent } from '../navbar/navbar.component';
-import { IndexComponent } from '../index/index.component';
-import { ResultsComponent } from '../results/results.component';
-import { AdvancedsearchComponent } from '../advancedsearch/advancedsearch.component';
 import { SearchBarComponent } from '../search-bar/search-bar.component';
 import { FormsModule } from '@angular/forms';
-import { FooterNavbarComponent } from '../footer-navbar/footer-navbar.component';
-import { AboutComponent } from '../about/about.component';
-import { Ng2Bs3ModalModule, ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal';
-import { ContactComponent } from '../contact/contact.component';
-import {InfoboxComponent} from "../infobox/infobox.component";
-import {RelatedSearchComponent} from "../related-search/related-search.component";
-import {AutoCompleteComponent} from "../auto-complete/auto-complete.component";
-import {AutocompleteService} from "../services/autocomplete.service";
-import { ThemeComponent } from '../theme/theme.component';
+import { AutoCompleteComponent } from '../auto-complete/auto-complete.component';
 import { SpeechService } from '../services/speech.service';
-import { DropdownComponent } from '../dropdown/dropdown.component';
-import {IntelligenceComponent} from "../intelligence/intelligence.component";
-import {SpeechtotextComponent} from "../speechtotext/speechtotext.component";
-import {AutoCorrectComponent} from "../auto-correct/auto-correct.component";
-import {InfiniteScrollModule} from "ngx-infinite-scroll";
+import { AutocompleteService } from '../services/autocomplete.service';
 
 describe('NotFoundComponent', () => {
   let component: NotFoundComponent;
@@ -41,39 +20,20 @@ describe('NotFoundComponent', () => {
     TestBed.configureTestingModule({
       imports: [
         RouterTestingModule,
-        BrowserModule,
         CommonModule,
         FormsModule,
         HttpModule,
         JsonpModule,
-        InfiniteScrollModule,
         StoreModule.provideStore(reducer),
-        StoreDevtoolsModule.instrumentOnlyWithExtension()
       ],
       declarations: [
-        AppComponent,
-        NavbarComponent,
-        IndexComponent,
-        ResultsComponent,
         NotFoundComponent,
-        AdvancedsearchComponent,
         SearchBarComponent,
-        FooterNavbarComponent,
-        AboutComponent,
-        ContactComponent,
-        ModalComponent,
-        InfoboxComponent,
-        RelatedSearchComponent,
-        AutoCompleteComponent,
-        ThemeComponent,
-        DropdownComponent,
-        IntelligenceComponent,
-        SpeechtotextComponent,
-        AutoCorrectComponent
+        AutoCompleteComponent
       ],
       providers: [
-        AutocompleteService,
-        SpeechService
+        SpeechService,
+        AutocompleteService
       ]
     })
       .compileComponents();

src/app/results/results.component.html

@@ -68,8 +68,12 @@
       </div>
         <app-related-search [hidden]="hidefooter"></app-related-search>
       </div>
-    <app-infobox [hidden]="hidefooter || hideAutoCorrect || totalNumber < 1" class="infobox" *ngIf="Display('all')"></app-infobox>
+    <div class="infobox">
+      <app-infobox [hidden]="hidefooter || hideAutoCorrect || totalNumber < 1" *ngIf="Display('all')"></app-infobox>
+      <app-statsbox [hidden]="hidefooter || hideAutoCorrect || totalNumber < 1" *ngIf="Display('all')"></app-statsbox>
+    </div>
   </div>
+
     <!-- Image section -->
     <div *ngIf="Display('images')">
       <div class="container">

src/app/results/results.component.spec.ts

@@ -35,9 +35,11 @@ import {IntelligenceComponent} from "../intelligence/intelligence.component";
 import {IntelligenceService} from "../services/intelligence.service";
 import {SpeechtotextComponent} from "../speechtotext/speechtotext.component";
 import {AutoCorrectComponent} from "../auto-correct/auto-correct.component";
+import {StatsboxComponent} from "../statsbox/statsbox.component";
 import {AutocorrectService} from "../services/autocorrect.service";
 import { SpeechSynthesisService } from "../services/speech-synthesis.service";
 import {InfiniteScrollModule} from "ngx-infinite-scroll";
+import {ChartsModule} from "ng2-charts";
 
 describe('ResultsComponent', () => {
   let component: ResultsComponent;
@@ -53,6 +55,7 @@ describe('ResultsComponent', () => {
         HttpModule,
         InfiniteScrollModule,
         JsonpModule,
+        ChartsModule,
         StoreModule.provideStore(reducer),
         StoreDevtoolsModule.instrumentOnlyWithExtension()
       ],
@@ -75,7 +78,8 @@ describe('ResultsComponent', () => {
         DropdownComponent,
         IntelligenceComponent,
         SpeechtotextComponent,
-        AutoCorrectComponent
+        AutoCorrectComponent,
+        StatsboxComponent
       ],
       providers: [
         SearchService,

src/app/services/speech-synthesis.service.ts

@@ -29,6 +29,7 @@ export class SpeechSynthesisService {
 
   pause(): void {
     const { speechSynthesis }: IWindow = <IWindow>window;
+    const { SpeechSynthesisUtterance }: IWindow = <IWindow>window;
 
     this.utterence = new SpeechSynthesisUtterance();
     (window as any).speechSynthesis.pause();

src/app/statsbox/statsbox.component.css

@@ -0,0 +1,68 @@
+.card {
+  /* Add shadows to create the "card" effect */
+  border: 1px solid rgba(150,150,150,0.3);
+  border-bottom-color: rgba(125,125,125,0.3);
+  margin-bottom: 16px;
+  padding: 22px 22px 18px 22px;
+  transition: 0.3s;
+  width: 434px;
+  margin-top: 10px;
+
+}
+.badge-info {
+  background-color: #468847;
+  padding: 0.25em;
+}
+.badge-info:hover {
+  background-color: #356635;
+}
+
+
+
+/* Add some padding inside the card container */
+.card-container {
+  padding: 2px 16px;
+}
+
+/* Heading */
+h2 {
+  font-size: 2.4em;
+}
+
+/* Description */
+p {
+  line-height: 20px;
+  font-family: Arial, sans-serif;
+  font-size: 13px;
+}
+
+/* Points of interest */
+h3 {
+  font-size: 1.3em;
+  margin-left: -15px;
+}
+
+a {
+  color: #1a0dab;
+  text-decoration: none;
+  margin-left: -14px;
+  font-size: 13px;
+  font-family: Arial, sans-serif;
+}
+
+/** Screen Responsiveness **/
+@media screen and (max-width: 1280px) {
+  .card{
+    width: 368px;
+  }
+}
+@media screen and (max-width: 1180px) {
+  .card{
+    width: 268px;
+  }
+}
+@media screen and (max-width: 998px) {
+  .card {
+    display: none;
+  }
+}

src/app/statsbox/statsbox.component.html

@@ -0,0 +1,40 @@
+<div class="card">
+  <h2 class="heading"><b>Analytics</b></h2>
+  <div id="filtersearch" *ngFor="let nav of navigation$|async; let i = index">
+    <div class="card-container" id="relate" *ngIf="nav.displayname =='Provider' || nav.displayname =='Authors'">
+      <h3  class="related-searches"><b>Top {{nav.displayname}}</b></h3>
+      <div style="display: block;cursor:pointer;cursor: hand;" *ngFor="let element of ((i != selectedelement)? (nav.elements| slice:0:5) :nav.elements )">
+        <a (click)="changeurl(element.modifier,element)" *ngIf="element.name">
+          {{element.name}} <span class="badge badge-info">{{element.count}}</span>
+        </a>
+        <a (click)="changeurl(element.modifier,element)" *ngIf="!element.name">
+          Undefined Author <span class="badge badge-info">{{element.count}}</span>
+        </a>
+      </div>
+      <a style="display: block;cursor:pointer;cursor: hand;" (click)="selectelement(i)" *ngIf="selectedelement!=i">
+        more..
+      </a>
+      <a style="display: block;cursor:pointer;cursor: hand;" (click)="deselectelement(i)" *ngIf="selectedelement===i">
+        less..
+      </a>
+    </div>
+  </div>
+  <div style="display: block;">
+    <canvas baseChart
+            [datasets]="lineChartData"
+            [labels]="lineChartLabels"
+            [options]="lineChartOptions"
+            [chartType]="lineChartType"
+            [colors]="lineChartColors"
+    ></canvas>
+  </div>
+  <div style="display: block;">
+    <canvas baseChart
+            [datasets]="barChartData"
+            [labels]="barChartLabels"
+            [options]="barChartOptions"
+            [chartType]="barChartType"
+            [colors]="lineChartColors"
+    ></canvas>
+  </div>
+</div>

src/app/statsbox/statsbox.component.spec.ts

@@ -0,0 +1,38 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StatsboxComponent } from './statsbox.component';
+import {RouterTestingModule} from "@angular/router/testing";
+import {HttpModule, JsonpModule} from "@angular/http";
+import {StoreModule} from "@ngrx/store";
+import {reducer} from "../reducers/index";
+import {ChartsModule} from "ng2-charts";
+
+describe('StatsboxComponent', () => {
+  let component: StatsboxComponent;
+  let fixture: ComponentFixture<StatsboxComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule,
+        HttpModule,
+        JsonpModule,
+        ChartsModule,
+        StoreModule.provideStore(reducer),
+      ],
+      declarations: [
+        StatsboxComponent,
+      ]
+    })
+      .compileComponents();
+  }));
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StatsboxComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});