Skip to content

Commit

Permalink
fix: additional user information in session dashboard AN-23410 (#554)
Browse files Browse the repository at this point in the history
  • Loading branch information
@amirch1
amirch1 authored Dec 16, 2024
1 parent f165786 commit 6230850
Show file tree
Hide file tree
Showing 5 changed files with 258 additions and 17 deletions.
76 changes: 67 additions & 9 deletions src/app/modules/entry-ep/views/session/viewer-engagement/viewer-engagement.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
</th>
</tr>

<tr *ngIf="_tableData?.length" class="kSummaryRow">
<tr *ngIf="_tabsData?.length" class="kSummaryRow">
<td [ngStyle]="{'width':'40px'}">
<th [ngStyle]="{'width': '30%'}">
<span>{{'app.playlist.summary' | translate}}</span>
Expand All @@ -67,7 +67,10 @@
</td>
<td *ngFor="let col of _columns; let i = index" [class.kHighlight]="i===0" [ngStyle]="{'paddingRight': col === 'combined_live_engaged_users_play_time_ratio' ? '24px' : '0px'}">
<ng-container>
<span *ngIf="col !== 'combined_live_engaged_users_play_time_ratio'">{{data[col]}}</span>
<span *ngIf="col !== 'combined_live_engaged_users_play_time_ratio'"
(mouseleave)="_hideOverlay()"
(mouseenter)="_showOverlay($event, data)"
>{{data[col]}}</span>
<app-bullet *ngIf="col === 'combined_live_engaged_users_play_time_ratio'" colorScheme="dropoff" [value]="data[col]"></app-bullet>
</ng-container>
</td>
Expand All @@ -80,14 +83,37 @@
</div>
</ng-template>
<ng-template let-data let-index="rowIndex" pTemplate="rowexpansion">
<tr>
<tr class="heatmapRow">
<td [attr.colspan]="_columns.length + 1" class="kRowExpansion">
<ep-heat-map [attr.data-aid]="'heat-map-' + index"
[userId]="data['user_id']"
[entryId]="entryIdIn"
[duration]="duration"
[actualStartDate]="actualStartDate"
[filter]="_filter"></ep-heat-map>
<div class="heatmap">
<ep-heat-map [attr.data-aid]="'heat-map-' + index"
[userId]="data['user_id']"
[entryId]="entryIdIn"
[duration]="duration"
[actualStartDate]="actualStartDate"
[filter]="_filter"></ep-heat-map>
<div class="moreInfo">
<div class="kMiniIcon blue"><i class="icon-ic_questions"></i></div>
<span class="value">{{data['count_q_and_a_threads']}}</span>
<span class="label">{{'app.entryEp.session.count_q_and_a_threads' | translate}}</span>

<div class="separator"></div>

<div class="kMiniIcon blue"><i class="icon-download"></i></div>
<span class="value">{{data['count_download_attachment_clicked']}}</span>
<span class="label">{{'app.entryEp.session.count_download_attachment_clicked' | translate}}</span>

<div class="separator"></div>

<div class="kMiniIcon blue">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
<path d="M3.58654 3.52583C3.40726 3.2985 3.45119 2.97542 3.68467 2.80421C3.91814 2.633 4.25275 2.6785 4.43204 2.90583L7.19134 6.40462C7.28098 6.51828 7.44829 6.54103 7.56503 6.45543C7.68177 6.36982 7.70373 6.20828 7.61409 6.09462L5.50403 3.41908C5.32475 3.19174 5.36868 2.86866 5.60215 2.69746C5.83563 2.52625 6.17024 2.57175 6.34952 2.79908L9.33607 6.586L8.9523 5.18828C8.87661 4.91258 9.04586 4.63185 9.33033 4.56125C9.6148 4.49065 9.90677 4.65691 9.98247 4.9326C10.5524 7.00843 11.9392 9.74455 9.7544 11.3466C8.35355 12.3739 6.3459 12.1009 5.27019 10.7369L2.34857 7.03231C2.16928 6.80498 2.21321 6.4819 2.44669 6.31069C2.68017 6.13948 3.01477 6.18498 3.19406 6.41231L4.65487 8.26461C4.74451 8.37828 4.91182 8.40102 5.02855 8.31542C5.14529 8.22982 5.16726 8.06828 5.07761 7.95461L2.96756 5.27907C2.78827 5.05174 2.8322 4.72866 3.06568 4.55745C3.29915 4.38624 3.63376 4.43174 3.81305 4.65907L5.67964 7.0259C5.76928 7.13956 5.93658 7.16231 6.05332 7.07671C6.17006 6.9911 6.19202 6.82956 6.10238 6.7159L3.58654 3.52583Z" fill="#487ADF"/>
</svg>
</div>
<span class="value">{{data['count_raise_hand_clicked']}}</span>
<span class="label">{{'app.entryEp.session.count_raise_hand_clicked' | translate}}</span>
</div>
</div>
</td>
</tr>
</ng-template>
Expand All @@ -103,3 +129,35 @@
</div>

</div>

<p-overlayPanel [showTransitionOptions]="'250ms'" [hideTransitionOptions]="'0ms'" #overlay appendTo="body">
<ng-template pTemplate>
<div class="userInfo">
<div class="header">
<div class="kUser">
<i class="icon-small-viewer-contributor"></i>
</div>
<div class="content">
<span class="name">{{_userData['user_name']}}</span>
<span *ngIf="_userData['title']" class="title">{{_userData['title']}}</span>
</div>
</div>
<div class="row" *ngIf="_userData['role']">
<span class="label">{{'app.entryEp.session.role' | translate}}</span>
<span class="value">{{_userData['role']}}</span>
</div>
<div class="row" *ngIf="_userData['company']">
<span class="label">{{'app.entryEp.session.company' | translate}}</span>
<span class="value">{{_userData['company']}}</span>
</div>
<div class="row" *ngIf="_userData['industry']">
<span class="label">{{'app.entryEp.session.industry' | translate}}</span>
<span class="value">{{_userData['industry']}}</span>
</div>
<div class="row" *ngIf="_userData['country']">
<span class="label">{{'app.entryEp.session.country' | translate}}</span>
<span class="value">{{_userData['country']}}</span>
</div>
</div>
</ng-template>
</p-overlayPanel>
116 changes: 115 additions & 1 deletion src/app/modules/entry-ep/views/session/viewer-engagement/viewer-engagement.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,15 +91,129 @@
font-weight: 400;
}
}
.userInfo {
padding: 16px;
width: 294px;
display: flex;
flex-direction: column;
overflow-x: hidden;
.header {
display: flex;
align-items: center;
margin-bottom: 16px;
.kUser {
cursor: pointer;
width: 80px;
height: 80px;
border-radius: 40px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(49,190,166,0.2);
margin-right: 8px;
flex: 0 0 auto;
i {
display: inline-block;
font-size: 48px;
color: #31BEA6;
}
}
}
.content {
display: flex;
flex-direction: column;
.name {
color: $kGrayscale1;
font-size: 18px;
font-weight: 700;
}
.title {
color: $kGrayscale3;
font-size: 14px;
font-weight: 700;
margin-top: 4px;
}
}
.row {
display: flex;
align-items: center;
margin-top: 8px;
.label {
color: $kGrayscale2;
font-size: 14px;
font-weight: 700;
margin-right: 4px;
}
.value {
color: $kGrayscale1;
font-size: 14px;
font-weight: 700;
}
}
}
:host ::ng-deep .heatmap {
display: flex;
flex-direction: column;
height: 96px;
.moreInfo {
height: 48px;
flex: 0 0 auto;
display: flex;
align-items: center;
padding-left: 56px;
.kMiniIcon {
flex: 0 0 auto;
width: 24px;
height: 24px;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
&.blue {
background-color: rgba(72, 122, 223, 0.2);
color: #487ADF;
}
i {
padding-bottom: 2px;
&:before {
font-size: 14px;
}
}
}
.value {
color: $kGrayscale1;
font-size: 18px;
font-weight: 700;
margin-left: 8px;
margin-right: 4px;
}
.label {
color: $kGrayscale2;
font-size: 14px;
font-weight: 700;
}
.separator {
width: 1px;
height: 24px;
margin-left: 32px;
margin-right: 32px;
background-color: $kGrayscale5;
}
}
}
:host ::ng-deep .kRowExpansion {
padding: 0 !important;
text-align: center;
height: 96px !important;
}

:host ::ng-deep .p-autocomplete-input-token input:focus {
outline: 5px auto rgba(0, 150, 255, 1) !important;
}

:host ::ng-deep p-table .p-datatable-tbody > tr.heatmapRow:hover {
background-color: white;
}
.kHighContrast :host {
th, td {
color: $kGrayscale1;
Expand Down
19 changes: 18 additions & 1 deletion src/app/modules/entry-ep/views/session/viewer-engagement/viewer-engagement.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {Component, Input, OnDestroy, OnInit} from '@angular/core';
import {Component, Input, OnDestroy, OnInit, ViewChild} from '@angular/core';
import { Tab } from 'shared/components/report-tabs/report-tabs.component';
import {KalturaClient, KalturaEndUserReportInputFilter, KalturaFilterPager, KalturaReportInterval, KalturaReportTable, KalturaReportTotal, KalturaReportType, KalturaUserFilter, UserListAction} from 'kaltura-ngx-client';
import { AreaBlockerMessage } from '@kaltura-ng/kaltura-ui';
Expand All @@ -20,6 +20,7 @@ import { ExportItem } from "shared/components/export-csv/export-config-base.serv
import { ExportConfig } from "./export.config";
import { analyticsConfig } from "configuration/analytics-config";
import {cancelOnDestroy} from "@kaltura-ng/kaltura-common";
import {OverlayPanel} from "primeng/overlaypanel";

@Component({
selector: 'app-ep-viewer-engagement',
Expand All @@ -33,6 +34,7 @@ import {cancelOnDestroy} from "@kaltura-ng/kaltura-common";
]
})
export class EpViewerEngagementComponent implements OnInit, OnDestroy {
@ViewChild('overlay') _overlay: OverlayPanel;
@Input() entryIdIn = '';
@Input() startDate: Date;
@Input() actualStartDate: Date; // session actual start date
Expand Down Expand Up @@ -61,6 +63,7 @@ export class EpViewerEngagementComponent implements OnInit, OnDestroy {
searchInTags: true,
searchInAdminTags: false
});
public _userData: any = null;

public _peopleSearch = '';

Expand Down Expand Up @@ -250,5 +253,19 @@ export class EpViewerEngagementComponent implements OnInit, OnDestroy {
}
}

public _showOverlay(event: any, data: any): void {
if (this._overlay && !analyticsConfig.multiAccount) {
this._userData = data;
this._overlay.show(event);
}
}

public _hideOverlay(): void {
if (this._overlay && !analyticsConfig.multiAccount) {
this._overlay.hide();
this._userData = null;
}
}

ngOnDestroy(): void {}
}
56 changes: 50 additions & 6 deletions src/app/modules/entry-ep/views/session/viewer-engagement/viewer-engagement.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,49 @@ export class ViewerEngagementConfig extends ReportDataBaseConfig {
format: value => ReportHelper.numberOrZero(value),
sortOrder: 3
},
'count_raise_hand_clicked': {
'count_group_chat_messages_sent': {
format: value => ReportHelper.numberOrZero(value),
sortOrder: 4
},
'count_poll_answered': {
format: value => ReportHelper.numberOrZero(value),
sortOrder: 5
},
'combined_live_engaged_users_play_time_ratio': {
format: value => ReportHelper.percents(value, false, true),
sortOrder: 5
sortOrder: 8
},
'title': {
format: value => value,
hidden: true,
},
'company': {
format: value => value,
hidden: true,
},
'country': {
format: value => value,
hidden: true,
},
'role': {
format: value => value,
hidden: true,
},
'industry': {
format: value => value,
hidden: true,
},
'count_raise_hand_clicked': {
format: value => ReportHelper.numberOrZero(value),
hidden: true,
},
'count_q_and_a_threads': {
format: value => ReportHelper.numberOrZero(value),
hidden: true,
},
'count_download_attachment_clicked': {
format: value => ReportHelper.numberOrZero(value),
hidden: true,
}
}
},
Expand All @@ -45,16 +81,24 @@ export class ViewerEngagementConfig extends ReportDataBaseConfig {
preSelected: 'live_view_time',
fields: {
'live_view_time': {
format: value => ReportHelper.numberOrZero(value)
format: value => ReportHelper.numberOrZero(value),
sortOrder: 1
},
'count_reaction_clicked': {
format: value => ReportHelper.numberOrZero(value)
format: value => ReportHelper.numberOrZero(value),
sortOrder: 2
},
'count_raise_hand_clicked': {
format: value => ReportHelper.numberOrZero(value)
'count_group_chat_messages_sent': {
format: value => ReportHelper.numberOrZero(value),
sortOrder: 3
},
'count_poll_answered': {
format: value => ReportHelper.numberOrZero(value),
sortOrder: 4
},
'combined_live_engaged_users_play_time_ratio': {
format: value => ReportHelper.percents(value, false, true),
sortOrder: 5
}
}
}
Expand Down
8 changes: 8 additions & 0 deletions src/assets/i18n/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -585,7 +585,15 @@
"live_view_time": "Minutes viewed",
"count_reaction_clicked": "Reactions",
"count_raise_hand_clicked": "Raised hands",
"count_group_chat_messages_sent": "Sent chat messages",
"count_poll_answered": "Poll answered",
"count_q_and_a_threads": "Q&A threads created",
"count_download_attachment_clicked": "Attachments downloaded",
"combined_live_engaged_users_play_time_ratio": "Live engagement rate",
"role": "Role",
"company": "Company",
"industry": "Industry",
"country": "Country",
"people": "Attendees",
"search": "Search attendees",
"heatMap": {
Expand Down

0 comments on commit 6230850

Please sign in to comment.