Merged in DSC-213 (pull request #37)

Author: Luca Giamminonni

src/app/shared/explore/section-component/facet-section/facet-section.component.html

@@ -1,15 +1,21 @@
 <div class="col-12">
   <h2>{{ 'explore.facet-section.title' | translate }}</h2>
   <div class="row">
-    <div *ngFor="let facet of (facets$ | async)" class="col-{{getFacetsBoxCol()}} mb-4">
+    <div *ngFor="let facet of (facets$ | async)" class="col-{{getFacetsBoxCol(facet)}} mb-4">
       <span>{{'explore.index.' + facet.name | translate}}</span>
-      <div *ngFor="let facetValue of facet._embedded.values" class="border p-3">
-        <a [routerLink]="[searchService.getSearchLink()]" 
-            [queryParams]="getSearchQueryParams(facet, facetValue)">
-            {{facetValue.label}} 
-        </a>
-        <span class="badge badge-secondary float-right">{{facetValue.count}}</span>
+      <div *ngIf="facet.filterType.includes('chart'); else notChartFacet">
+        <ds-search-chart [filter]="facet" [inPlaceSearch]="false"> </ds-search-chart>
       </div>
+      <ng-template #notChartFacet>
+        <div *ngFor="let facetValue of facet._embedded.values" class="border p-3">
+          <a [routerLink]="[searchService.getSearchLink()]"
+             [queryParams]="getSearchQueryParams(facet, facetValue)">
+            {{facetValue.label}}
+          </a>
+          <span class="badge badge-secondary float-right">{{facetValue.count}}</span>
+        </div>
+      </ng-template>
+
     </div>
   </div>
 </div>

src/app/shared/explore/section-component/facet-section/facet-section.component.spec.ts

@@ -15,6 +15,12 @@ import { FacetValue } from '../../../search/facet-value.model';
 import { FilterType } from '../../../search/filter-type.model';
 import { SearchFilterConfig } from '../../../search/search-filter-config.model';
 import { FacetSectionComponent } from './facet-section.component';
+import {SEARCH_CONFIG_SERVICE} from '../../../../my-dspace-page/my-dspace-page.component';
+import {SearchConfigurationServiceStub} from '../../../testing/search-configuration-service.stub';
+import {StoreModule} from '@ngrx/store';
+import {authReducer} from '../../../../core/auth/auth.reducer';
+import {storeModuleConfig} from '../../../../app.reducer';
+import {isNotNull} from '../../../empty.util';
 
 describe('FacetSectionComponent', () => {
   let component: FacetSectionComponent;
@@ -75,12 +81,43 @@ describe('FacetSectionComponent', () => {
       values: [dateIssuedValue]
     }
   });
-
+  const barChartFacetValue: FacetValue = {
+    label: '2007',
+    value: '2007',
+    count: 13,
+    _links: {
+      self: { href: 'fa-selectedValue-self-link' },
+      search: { href: '' }
+    }
+  };
+  const mockGraphBarChartFilterConfig = Object.assign(new SearchFilterConfig(), {
+    name: 'dateIssued',
+    filterType: FilterType['chart.bar'],
+    _embedded: {
+      values: [barChartFacetValue]
+    }
+  });
+  const pieChartFacetValue: FacetValue = {
+    label: 'Other',
+    value: 'Other',
+    count: 13,
+    _links: {
+      self: { href: 'fa-selectedValue-self-link' },
+      search: { href: '' }
+    }
+  };
+  const mockGraphPieChartFilterConfig = Object.assign(new SearchFilterConfig(), {
+    name: 'dateIssued',
+    filterType: FilterType['chart.pie'],
+    _embedded: {
+      values: [pieChartFacetValue]
+    }
+  });
   beforeEach(async(() => {
 
     searchServiceStub = {
       searchFacets(scope?: string, configurationName?: string): Observable<RemoteData<SearchFilterConfig[]>> {
-        return createSuccessfulRemoteDataObject$([mockAuthorFilterConfig, mockSubjectFilterConfig, mockDateIssuedFilterConfig]);
+        return createSuccessfulRemoteDataObject$([mockAuthorFilterConfig, mockSubjectFilterConfig, mockDateIssuedFilterConfig, mockGraphBarChartFilterConfig, mockGraphPieChartFilterConfig]);
       },
       getSearchLink(): string {
         return '/search';
@@ -89,6 +126,7 @@ describe('FacetSectionComponent', () => {
 
     TestBed.configureTestingModule({
       imports: [CommonModule, NgbModule, FormsModule, ReactiveFormsModule, BrowserModule, RouterTestingModule,
+        StoreModule.forRoot({ auth: authReducer }, storeModuleConfig),
         TranslateModule.forRoot({
           loader: {
             provide: TranslateLoader,
@@ -98,7 +136,8 @@ describe('FacetSectionComponent', () => {
       ],
       declarations: [FacetSectionComponent],
       providers: [FacetSectionComponent,
-        { provide: SearchService, useValue: searchServiceStub }],
+        { provide: SearchService, useValue: searchServiceStub },
+        { provide: SEARCH_CONFIG_SERVICE, useValue: new SearchConfigurationServiceStub() }],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();
 
@@ -124,6 +163,20 @@ describe('FacetSectionComponent', () => {
   }));
 
   it('should create a facet section foreach not empty filter configs',  () => {
+    // graph facets control
+    const graphFacets = fixture.debugElement.queryAll(By.css('.col-6.mb-4'));
+    expect(graphFacets.length).toEqual(2);
+    const barChartFacet = graphFacets[0];
+    expect(barChartFacet.name).toEqual('div');
+    expect(barChartFacet.children.length).toEqual(2);
+    const barChartComponent = barChartFacet.query(By.css('ds-search-chart'));
+    expect(isNotNull(barChartComponent)).toBe(true);
+    const pieChartFacet = graphFacets[1];
+    expect(pieChartFacet.children.length).toEqual(2);
+    expect(pieChartFacet.name).toEqual('div');
+    const pieChartComponent = pieChartFacet.query(By.css('ds-search-chart'));
+    expect(isNotNull(pieChartComponent)).toBe(true);
+
     const facets = fixture.debugElement.queryAll(By.css('.col-3.mb-4'));
     expect(facets.length).toEqual(2);
 

src/app/shared/explore/section-component/facet-section/facet-section.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import {Component, Inject, Input, OnInit} from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import { FacetSection } from '../../../../core/layout/models/section.model';
 import { getFirstSucceededRemoteDataPayload } from '../../../../core/shared/operators';
@@ -7,13 +7,21 @@ import { SearchFilterConfig } from '../../../search/search-filter-config.model';
 import { FilterType } from '../../../search/filter-type.model';
 import { FacetValue } from '../../../search/facet-value.model';
 import { getFacetValueForTypeAndLabel } from '../../../search/search.utils';
+import {SEARCH_CONFIG_SERVICE} from '../../../../my-dspace-page/my-dspace-page.component';
+import {SearchConfigurationService} from '../../../../core/shared/search/search-configuration.service';
 
 /**
  * Component representing the Facet component section.
  */
 @Component({
     selector: 'ds-facet-section',
-    templateUrl: './facet-section.component.html'
+    templateUrl: './facet-section.component.html',
+    providers: [
+        {
+      provide: SEARCH_CONFIG_SERVICE,
+      useClass: SearchConfigurationService
+    }
+  ]
 })
 export class FacetSectionComponent implements OnInit {
 
@@ -28,7 +36,9 @@ export class FacetSectionComponent implements OnInit {
     facets: SearchFilterConfig[] = [];
     facets$ = new BehaviorSubject(this.facets);
 
-    constructor(public searchService: SearchService) {
+    constructor(public searchService: SearchService,
+                @Inject(SEARCH_CONFIG_SERVICE) public searchConfigService: SearchConfigurationService,
+    ) {
 
     }
 
@@ -75,7 +85,10 @@ export class FacetSectionComponent implements OnInit {
         return filterType === FilterType.range && value.split('-').length === 2;
     }
 
-    getFacetsBoxCol() {
+    getFacetsBoxCol(facet) {
+        if (facet.filterType.includes('chart')) {
+          return 6;
+       }
         const facetsPerRow = this.facetSection.facetsPerRow ? this.facetSection.facetsPerRow : 4;
         return 12 / facetsPerRow;
     }

src/assets/i18n/en.json5

@@ -1566,6 +1566,10 @@
 
   "explore.index.author" : "Author",
 
+  "explore.index.graphitemtype" : "Graph by type",
+
+  "explore.index.graphpubldate" : "Graph by date",
+
   "explore.index.birthDate" : "Birthday",
 
   "explore.index.metric.view" : "Most viewed",