Skip to content

Commit

Permalink
update layout after 200 ms to make sure the UI is fully rendered
Browse files Browse the repository at this point in the history
  • Loading branch information
amirch1 committed Jun 9, 2020
1 parent f0c8186 commit bd39940
Show file tree
Hide file tree
Showing 4 changed files with 42 additions and 42 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -113,11 +113,11 @@ export class ImageEntryPerformanceComponent extends EntryBase implements OnDestr
ngOnDestroy(): void {
this._filterChange.complete();
}

private _updateTableData(): void {
const tableData = this._tableMode === TableModes.dates ? this._datesTableData : this._usersTableData;
const columns = this._tableMode === TableModes.dates ? this._datesColumns : this._usersColumns;

if (tableData === null) {
if (this._tableMode === TableModes.dates && !this._isCompareMode && this._rawGraphData.length) {
this._handleDatesTable(this._rawGraphData);
Expand Down Expand Up @@ -433,7 +433,7 @@ export class ImageEntryPerformanceComponent extends EntryBase implements OnDestr
if (analyticsConfig.isHosted) {
setTimeout(() => {
this._frameEventManager.publish(FrameEvents.UpdateLayout, { 'height': document.getElementById('analyticsApp').getBoundingClientRect().height });
}, 0);
}, 200);
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ export class VideoEntryPerformanceComponent extends EntryBase implements OnDestr
private _updateTableData(): void {
const tableData = this._tableMode === TableModes.dates ? this._datesTableData : this._usersTableData;
const columns = this._tableMode === TableModes.dates ? this._datesColumns : this._usersColumns;

if (tableData === null) {
if (this._tableMode === TableModes.dates && !this._isCompareMode && this._rawGraphData.length) {
this._handleDatesTable(this._rawGraphData);
Expand Down Expand Up @@ -457,7 +457,7 @@ export class VideoEntryPerformanceComponent extends EntryBase implements OnDestr
if (analyticsConfig.isHosted) {
setTimeout(() => {
this._frameEventManager.publish(FrameEvents.UpdateLayout, { 'height': document.getElementById('analyticsApp').getBoundingClientRect().height });
}, 0);
}, 200);
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,7 @@ export class PathContentComponent extends PlaylistBase implements OnInit, OnDest
if (analyticsConfig.isHosted) {
setTimeout(() => {
this._frameEventManager.publish(FrameEvents.UpdateLayout, { 'height': document.getElementById('analyticsApp').getBoundingClientRect().height });
}, 0);
}, 200);
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ import {reportTypeMap} from "shared/utils/report-type-map";
export class PathPerformanceComponent extends PlaylistBase implements OnDestroy {
@Input() playlistId = '';
@Input() dateFilterComponent: DateFilterComponent;

private _order = '-date_id';
private _reportType = reportTypeMap(KalturaReportType.userInteractiveVideo);
private _dataConfig: ReportDataConfig;
Expand All @@ -38,10 +38,10 @@ export class PathPerformanceComponent extends PlaylistBase implements OnDestroy
private _filterChange = new Subject();

public _metricsCompareTo: string = null;

public _dateFilter: DateChangeEvent;
protected _componentId = 'path-performance';

public _filterChange$ = this._filterChange.asObservable();
public _tableMode = TableModes.dates;
public _columns: string[] = [];
Expand Down Expand Up @@ -83,7 +83,7 @@ export class PathPerformanceComponent extends PlaylistBase implements OnDestroy
public get _isCompareMode(): boolean {
return this._compareFilter !== null;
}

constructor(private _frameEventManager: FrameEventManagerService,
private _translate: TranslateService,
private _reportService: ReportService,
Expand All @@ -92,31 +92,31 @@ export class PathPerformanceComponent extends PlaylistBase implements OnDestroy
private _authService: AuthService,
private _dataConfigService: PathPerformanceConfig) {
super();

this._dataConfig = _dataConfigService.getConfig();
this._selectedMetrics = this._dataConfig.totals.preSelected;
this._selectedMetricsLabel = this._translate.instant(`app.playlist.${this._selectedMetrics}`);

const totalsConfig = this._dataConfig[ReportDataSection.totals].fields;
const graphConfig = this._dataConfig[ReportDataSection.graph].fields;
Object.keys(totalsConfig).forEach(field => {
this._metricsOptions.push({
label: this._translate.instant(`app.playlist.${field}`),
value: field
});

this._metricsColors[field] = graphConfig[field].colors ? graphConfig[field].colors[0] : null;
});
}

ngOnDestroy(): void {
this._filterChange.complete();
}

private _updateTableData(): void {
const tableData = this._tableMode === TableModes.dates ? this._datesTableData : this._usersTableData;
const columns = this._tableMode === TableModes.dates ? this._datesColumns : this._usersColumns;

if (tableData === null) {
let sections: ReportDataConfig = {table: this._dataConfig[ReportDataSection.table]};
if (this._tableMode === TableModes.dates && !this._isCompareMode && this._rawGraphData.length) {
Expand All @@ -132,31 +132,31 @@ export class PathPerformanceComponent extends PlaylistBase implements OnDestroy
this._columns = columns;
}
}

protected _loadReport(sections = this._dataConfig): void {
this._isBusy = true;
this._blockerMessage = null;

const reportConfig: ReportConfig = { reportType: this._reportType, filter: this._filter, order: this._order };
reportConfig.filter.rootEntryIdIn = this.playlistId;

sections = { ...sections }; // make local copy

if ([TableModes.dates].indexOf(this._tableMode) !== -1) {
delete sections[ReportDataSection.table]; // remove table config to prevent table request
} else if (this._tableMode === TableModes.users) {
reportConfig.pager = this._pager;
}

this._reportService.getReport(reportConfig, sections)
.pipe(switchMap(report => {
if (!this._isCompareMode) {
return ObservableOf({ report, compare: null });
}

const compareReportConfig: ReportConfig = { reportType: this._reportType, filter: this._compareFilter, order: this._order };
compareReportConfig.filter.rootEntryIdIn = this.playlistId;

if (this._tableMode === TableModes.users) {
compareReportConfig.pager = this._pager;
}
Expand Down Expand Up @@ -206,7 +206,7 @@ export class PathPerformanceComponent extends PlaylistBase implements OnDestroy
this._blockerMessage = this._errorsManager.getErrorMessage(error, actions);
});
}

protected _updateRefineFilter(): void {
this._datesTableData = null;
this._usersTableData = null;
Expand All @@ -219,7 +219,7 @@ export class PathPerformanceComponent extends PlaylistBase implements OnDestroy
}
this._filterChange.next();
}

protected _updateFilter(): void {
this._datesTableData = null;
this._usersTableData = null;
Expand All @@ -242,15 +242,15 @@ export class PathPerformanceComponent extends PlaylistBase implements OnDestroy
}
this._filterChange.next();
}

private _handleCompare(current: Report, compare: Report): void {
const currentPeriod = { from: this._filter.fromDate, to: this._filter.toDate };
const comparePeriod = { from: this._compareFilter.fromDate, to: this._compareFilter.toDate };

if (current.totals) {
this._handleTotals(current.totals); // handle totals
}

if (current.graphs.length && compare.graphs.length) {
const { lineChartData } = this._compareService.compareGraphData(
currentPeriod,
Expand All @@ -261,12 +261,12 @@ export class PathPerformanceComponent extends PlaylistBase implements OnDestroy
this._reportInterval,
);
this._lineChartData = lineChartData;

if (this._metricsCompareTo) {
this._onCompareTo(this._metricsCompareTo);
}
}

if (this._tableMode === TableModes.dates) {
const compareTableData = this._compareService.compareTableFromGraph(
currentPeriod,
Expand All @@ -276,7 +276,7 @@ export class PathPerformanceComponent extends PlaylistBase implements OnDestroy
this._dataConfig.table,
this._reportInterval,
);

if (compareTableData) {
const { columns, tableData, totalCount } = compareTableData;
this._totalCount = totalCount;
Expand Down Expand Up @@ -304,11 +304,11 @@ export class PathPerformanceComponent extends PlaylistBase implements OnDestroy
}
}
}

private _handleTotals(totals: KalturaReportTotal): void {
this._tabsData = this._reportService.parseTotals(totals, this._dataConfig.totals, this._selectedMetrics);
}

private _handleGraphs(graphs: KalturaReportGraph[]): void {
const { lineChartData } = this._reportService.parseGraphs(
graphs,
Expand All @@ -321,7 +321,7 @@ export class PathPerformanceComponent extends PlaylistBase implements OnDestroy
this._onCompareTo(this._metricsCompareTo);
}
}

private _handleDatesTable(graphs: KalturaReportGraph[]): void {
const { columns, tableData, totalCount } = this._reportService.tableFromGraph(
graphs,
Expand All @@ -334,7 +334,7 @@ export class PathPerformanceComponent extends PlaylistBase implements OnDestroy
this._columns = [...this._datesColumns];
this._tableData = [...this._datesTableData];
}

private _handleUsersTable(table: KalturaReportTable): void {
const { columns, tableData } = this._reportService.parseTableData(table, this._dataConfig.table);
this._totalCount = table.totalCount;
Expand All @@ -349,12 +349,12 @@ export class PathPerformanceComponent extends PlaylistBase implements OnDestroy
this._selectedMetricsLabel = this._translate.instant(`app.playlist.${this._selectedMetrics}`);
this._metricsLineChartData = null;
}

public _toggleTable(): void {
this._showTable = !this._showTable;
this.updateLayout();
}

public _onSortChanged(event: SortEvent): void {
this._pager.pageIndex = 1;

Expand All @@ -367,7 +367,7 @@ export class PathPerformanceComponent extends PlaylistBase implements OnDestroy
this._ignoreFirstSortEvent = false;
return;
}

setTimeout(() => {
const order = event.order === 1 ? '+' + event.field : '-' + event.field;
if (order !== this._order) {
Expand All @@ -377,7 +377,7 @@ export class PathPerformanceComponent extends PlaylistBase implements OnDestroy
});
}
}

public _onCompareTo(field: string): void {
if (field) {
this._metricsCompareTo = field;
Expand Down Expand Up @@ -411,14 +411,14 @@ export class PathPerformanceComponent extends PlaylistBase implements OnDestroy
this._metricsCompareTo = null;
}
}

private shouldNormalize(metric: string): boolean {
return (metric === 'count_loads' && this._selectedMetrics === 'count_plays') ||
(metric === 'count_plays' && this._selectedMetrics === 'count_loads') ||
(metric === 'sum_view_period' && this._selectedMetrics === 'avg_view_period_time') ||
(metric === 'avg_view_period_time' && this._selectedMetrics === 'sum_view_period');
}

public _onPaginationChange(event: { page: number, first: number, rows: number, pageCount: number }): void {
if (this._customPaginator && event.page !== (this._pager.pageIndex - 1)) {
this._pager.pageIndex = event.page + 1;
Expand All @@ -432,10 +432,10 @@ export class PathPerformanceComponent extends PlaylistBase implements OnDestroy
if (analyticsConfig.isHosted) {
setTimeout(() => {
this._frameEventManager.publish(FrameEvents.UpdateLayout, { 'height': document.getElementById('analyticsApp').getBoundingClientRect().height });
}, 0);
}, 200);
}
}

public _onTableModeChange(mode: TableModes): void {
this._tableMode = mode;
this._customPaginator = this._ignoreFirstSortEvent = this._tableMode === TableModes.users;
Expand Down

0 comments on commit bd39940

Please sign in to comment.