src/app/manager-dashboard/reports/reports-detail.component.html
<mat-toolbar class="action-buttons">
<button class="btnBack" mat-icon-button (click)="goBack()">
<mat-icon>arrow_back</mat-icon>
</button>
<span i18n>Reports</span>
<span class="toolbar-fill"></span>
<mat-form-field *ngIf="teams" class="font-size-1 margin-lr-5">
<mat-select i18n-placeholder placeholder="Filter Members" (selectionChange)="onTeamsFilterChange($event.value)" value="All">
<mat-option i18n value="All">All Members</mat-option>
<mat-optgroup label="Teams" i18n-label>
<mat-option *ngFor="let team of teams.team" [value]="team">{{team.name}}</mat-option>
</mat-optgroup>
<mat-optgroup label="Enterprises" i18n-label>
<mat-option *ngFor="let team of teams.enterprise" [value]="team">{{team.name}}</mat-option>
</mat-optgroup>
</mat-select>
</mat-form-field>
<ng-container *ngIf="minDate">
<form [formGroup]="dateFilterForm" class="font-size-1 action-buttons">
<mat-form-field>
<mat-label i18n>Start Date</mat-label>
<input matInput formControlName="startDate" [matDatepicker]="startDate" [min]="minDate" [max]="today">
<mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
<mat-datepicker #startDate></mat-datepicker>
</mat-form-field>
<mat-form-field>
<mat-label i18n>End Date</mat-label>
<input matInput formControlName="endDate" [matDatepicker]="endDate" [min]="minDate" [max]="today">
<mat-datepicker-toggle matSuffix [for]="endDate"></mat-datepicker-toggle>
<mat-datepicker #endDate></mat-datepicker>
</mat-form-field>
</form>
<button mat-raised-button color="primary" i18n (click)="resetDateFilter()" [disabled]="disableShowAllTime">Show All Time</button>
</ng-container>
<mat-button-toggle-group
class="font-size-1"
(change)="onFilterChange($event.value)"
#filterGroup="matButtonToggleGroup">
<mat-button-toggle value="planet" [checked]="this.filter.app === 'planet'" i18n>
Planet
</mat-button-toggle>
<mat-button-toggle value="myplanet" [checked]="this.filter.app === 'myplanet'" i18n>
myPlanet
</mat-button-toggle>
<mat-button-toggle value="" [checked]="this.filter.app === ''" i18n>
Both
</mat-button-toggle>
</mat-button-toggle-group>
</mat-toolbar>
<div class="space-container">
<mat-toolbar>
<mat-toolbar-row class="primary-color font-size-1">
<span>{{planetName}}</span>
<span class="toolbar-fill"></span>
<button class="margin-lr-10" color="accent" mat-raised-button i18n [matMenuTriggerFor]="exportMenu">
Export
</button>
<mat-menu #exportMenu="matMenu">
<button mat-menu-item *ngIf="loginActivities" (click)="openExportDialog('logins')" i18n>Login Report</button>
<button mat-menu-item *ngIf="resourceActivities.total" (click)="openExportDialog('resourceViews')" i18n>Resources View Report</button>
<button mat-menu-item *ngIf="courseActivities.total" (click)="openExportDialog('courseViews')" i18n>Courses View Report</button>
<button mat-menu-item *ngIf="progress?.steps" (click)="openExportDialog('stepCompletions')" i18n>Course Progress Report</button>
<button mat-menu-item *ngIf="healthComponent?.examinations?.length > 0" (click)="openExportDialog('health')" i18n>Health Report</button>
<button mat-menu-item (click)="openExportDialog('summary')" i18n>Summary</button>
</mat-menu>
</mat-toolbar-row>
</mat-toolbar>
<div class="view-container view-full-height">
<mat-tab-group>
<mat-tab i18n-label label="Summary">
<canvas id="uniqueVisitChart"></canvas>
<canvas id="visitChart"></canvas>
<canvas id="resourceViewChart"></canvas>
<canvas id="courseViewChart"></canvas>
<canvas id="stepCompletedChart"></canvas>
<div class="reports-table-container">
<div>
<h1 class="mat-title" i18n>Members</h1>
<mat-grid-list cols="2" rowHeight="2rem">
<mat-grid-tile class="label" i18n>Total Members</mat-grid-tile>
<mat-grid-tile>{{reports?.totalUsers}}</mat-grid-tile>
<mat-grid-tile class="label">
<mat-icon>chevron_right</mat-icon>
<span i18n>Male</span>
</mat-grid-tile>
<mat-grid-tile>{{reports?.usersByGender?.male || 0}}</mat-grid-tile>
<mat-grid-tile class="label" >
<mat-icon>chevron_right</mat-icon>
<span i18n>Female</span>
</mat-grid-tile>
<mat-grid-tile>{{reports?.usersByGender?.female || 0}}</mat-grid-tile>
<mat-grid-tile class="label">
<mat-icon>chevron_right</mat-icon>
<span i18n>Did not specify</span>
</mat-grid-tile>
<mat-grid-tile>{{reports?.usersByGender?.didNotSpecify || 0}}</mat-grid-tile>
<mat-grid-tile class="label" i18n>Total Visits</mat-grid-tile>
<mat-grid-tile>{{reports?.totalMemberVisits}}</mat-grid-tile>
<mat-grid-tile class="label" i18n>Members by Visits</mat-grid-tile>
<mat-grid-tile i18n>Total Visits by Member</mat-grid-tile>
<ng-container *ngIf="!reports?.visits || reports?.visits.length === 0">
<mat-grid-tile colspan="2" i18n>There are no visits</mat-grid-tile>
</ng-container>
<ng-container *ngFor="let visit of reports?.visits">
<mat-grid-tile class="label">
<mat-icon>chevron_right</mat-icon>
<span class="cursor-pointer" (click)="openMemberView(visit.userDoc?.doc)">{{visit.userDoc?.fullName || visit.user }}</span>
</mat-grid-tile>
<mat-grid-tile>{{visit.count}}</mat-grid-tile>
</ng-container>
</mat-grid-list>
</div>
<div>
<h1 class="mat-title" i18n>Resources</h1>
<mat-grid-list cols="2" rowHeight="2rem">
<mat-grid-tile class="label" i18n>Total Resources</mat-grid-tile>
<mat-grid-tile>{{reports?.totalResources}}</mat-grid-tile>
<mat-grid-tile class="label" i18n>Total Views</mat-grid-tile>
<mat-grid-tile>{{reports?.totalResourceViews}}</mat-grid-tile>
<mat-grid-tile class="label" i18n>Most Visited</mat-grid-tile>
<mat-grid-tile i18n>Total Visits by Resource</mat-grid-tile>
<ng-container *ngIf="!reports?.resources || reports?.resources.length === 0">
<mat-grid-tile colspan="2" i18n>No resources have been visited</mat-grid-tile>
</ng-container>
<ng-container *ngFor="let resource of reports?.resources">
<mat-grid-tile class="label">
<mat-icon>chevron_right</mat-icon>
<span class="cursor-pointer" (click)="openResourceView(resource.resourceId)">{{resource?.max?.title}}</span>
</mat-grid-tile>
<mat-grid-tile>{{resource.count}}</mat-grid-tile>
</ng-container>
<mat-grid-tile class="label" i18n>Highest Rated</mat-grid-tile>
<mat-grid-tile i18n>Average Rating</mat-grid-tile>
<ng-container *ngIf="!reports?.resourceRatings || reports?.resourceRatings.length === 0">
<mat-grid-tile colspan="2" i18n>There are no resource ratings</mat-grid-tile>
</ng-container>
<ng-container *ngFor="let rating of reports?.resourceRatings">
<mat-grid-tile class="label">
<mat-icon>chevron_right</mat-icon>
<span class="cursor-pointer" (click)="openResourceView(rating.item)">{{rating?.title}}</span>
</mat-grid-tile>
<mat-grid-tile>{{rating?.value}}</mat-grid-tile>
</ng-container>
</mat-grid-list>
</div>
<div>
<h1 class="mat-title" i18n>Courses</h1>
<mat-grid-list cols="2" rowHeight="2rem">
<mat-grid-tile class="label" i18n>Total Courses</mat-grid-tile>
<mat-grid-tile>{{reports?.totalCourses}}</mat-grid-tile>
<mat-grid-tile class="label" i18n>Total Views</mat-grid-tile>
<mat-grid-tile>{{reports?.totalCourseViews}}</mat-grid-tile>
<mat-grid-tile class="label" i18n>Steps Completed</mat-grid-tile>
<mat-grid-tile>{{reports?.totalStepCompleted}}</mat-grid-tile>
<mat-grid-tile class="label" i18n>Most Visited</mat-grid-tile>
<mat-grid-tile i18n>Total Visits by Course</mat-grid-tile>
<ng-container *ngIf="!reports?.courses || reports?.courses.length === 0">
<mat-grid-tile colspan="2" i18n>No courses have been visited</mat-grid-tile>
</ng-container>
<ng-container *ngFor="let course of reports?.courses">
<mat-grid-tile class="label">
<mat-icon>chevron_right</mat-icon>
<span class="cursor-pointer" (click)="openCourseView(course.courseId)">{{course?.max?.title}}</span>
</mat-grid-tile>
<mat-grid-tile>{{course.count}}</mat-grid-tile>
</ng-container>
<mat-grid-tile class="label" i18n>Highest Rated</mat-grid-tile>
<mat-grid-tile i18n>Average Rating</mat-grid-tile>
<ng-container *ngIf="!reports?.courseRatings || reports?.courseRatings.length === 0">
<mat-grid-tile colspan="2" i18n>There are no course ratings</mat-grid-tile>
</ng-container>
<ng-container *ngFor="let rating of reports?.courseRatings">
<mat-grid-tile class="label">
<mat-icon>chevron_right</mat-icon>
<span class="cursor-pointer" (click)="openCourseView(rating.item)">{{rating?.title}}</span>
</mat-grid-tile>
<mat-grid-tile>{{rating?.value}}</mat-grid-tile>
</ng-container>
</mat-grid-list>
</div>
</div>
</mat-tab>
<mat-tab i18n-label label="Resources">
<planet-reports-detail-activities [activitiesByDoc]="resourceActivities.byDoc" [ratings]="ratings.resources" activityType="resources" (itemClick)="openResourceView($event)"></planet-reports-detail-activities>
</mat-tab>
<mat-tab i18n-label label="Courses">
<planet-reports-detail-activities [activitiesByDoc]="courseActivities.byDoc" [ratings]="ratings.courses" [progress]="progress" activityType="courses" (itemClick)="openCourseView($event)"></planet-reports-detail-activities>
</mat-tab>
<mat-tab i18n-label label="Health" #healthTab>
<planet-reports-health [planetCode]="planetCode" [dateRange]="dateFilterForm?.value" [isActive]="healthTab.isActive" (changeDateRange)="resetDateFilter($event)"></planet-reports-health>
</mat-tab>
</mat-tab-group>
</div>
</div>