From bd399409bd0b23d9ada6f1771f68d32432a1072e Mon Sep 17 00:00:00 2001 From: "amir.chervinsky" Date: Tue, 9 Jun 2020 15:20:48 +0300 Subject: [PATCH] update layout after 200 ms to make sure the UI is fully rendered --- .../image-performance.component.ts | 6 +- .../video-performance.component.ts | 4 +- .../path-content/path-content.component.ts | 2 +- .../path-performance.component.ts | 72 +++++++++---------- 4 files changed, 42 insertions(+), 42 deletions(-) diff --git a/src/app/modules/entry/views/image/image-performance/image-performance.component.ts b/src/app/modules/entry/views/image/image-performance/image-performance.component.ts index ae6424c4e..7006bd76c 100644 --- a/src/app/modules/entry/views/image/image-performance/image-performance.component.ts +++ b/src/app/modules/entry/views/image/image-performance/image-performance.component.ts @@ -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); @@ -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); } } diff --git a/src/app/modules/entry/views/video/video-performance/video-performance.component.ts b/src/app/modules/entry/views/video/video-performance/video-performance.component.ts index f8fb443e6..9eee3f9f6 100644 --- a/src/app/modules/entry/views/video/video-performance/video-performance.component.ts +++ b/src/app/modules/entry/views/video/video-performance/video-performance.component.ts @@ -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); @@ -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); } } diff --git a/src/app/modules/playlist/views/path/path-content/path-content.component.ts b/src/app/modules/playlist/views/path/path-content/path-content.component.ts index f985424bf..920336f42 100644 --- a/src/app/modules/playlist/views/path/path-content/path-content.component.ts +++ b/src/app/modules/playlist/views/path/path-content/path-content.component.ts @@ -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); } } diff --git a/src/app/modules/playlist/views/path/path-performance/path-performance.component.ts b/src/app/modules/playlist/views/path/path-performance/path-performance.component.ts index b7bbeecdd..83ac4519e 100644 --- a/src/app/modules/playlist/views/path/path-performance/path-performance.component.ts +++ b/src/app/modules/playlist/views/path/path-performance/path-performance.component.ts @@ -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; @@ -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[] = []; @@ -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, @@ -92,11 +92,11 @@ 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 => { @@ -104,19 +104,19 @@ export class PathPerformanceComponent extends PlaylistBase implements OnDestroy 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) { @@ -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; } @@ -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; @@ -219,7 +219,7 @@ export class PathPerformanceComponent extends PlaylistBase implements OnDestroy } this._filterChange.next(); } - + protected _updateFilter(): void { this._datesTableData = null; this._usersTableData = null; @@ -242,7 +242,7 @@ 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 }; @@ -250,7 +250,7 @@ export class PathPerformanceComponent extends PlaylistBase implements OnDestroy if (current.totals) { this._handleTotals(current.totals); // handle totals } - + if (current.graphs.length && compare.graphs.length) { const { lineChartData } = this._compareService.compareGraphData( currentPeriod, @@ -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, @@ -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; @@ -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, @@ -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, @@ -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; @@ -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; @@ -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) { @@ -377,7 +377,7 @@ export class PathPerformanceComponent extends PlaylistBase implements OnDestroy }); } } - + public _onCompareTo(field: string): void { if (field) { this._metricsCompareTo = field; @@ -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; @@ -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;