|
@@ -35,15 +35,26 @@ import { NzMessageService } from 'ng-zorro-antd/message';
|
|
|
<nz-page-header [nzGhost]="false">
|
|
<nz-page-header [nzGhost]="false">
|
|
|
<nz-page-header-title>数据看板</nz-page-header-title>
|
|
<nz-page-header-title>数据看板</nz-page-header-title>
|
|
|
<nz-page-header-extra>
|
|
<nz-page-header-extra>
|
|
|
- <span nz-icon nzType="sync" nzTheme="outline" (click)="refreshData()"></span>
|
|
|
|
|
|
|
+ <span
|
|
|
|
|
+ nz-icon
|
|
|
|
|
+ nzType="sync"
|
|
|
|
|
+ nzTheme="outline"
|
|
|
|
|
+ (click)="refreshData()"
|
|
|
|
|
+ ></span>
|
|
|
</nz-page-header-extra>
|
|
</nz-page-header-extra>
|
|
|
<nz-page-header-content>
|
|
<nz-page-header-content>
|
|
|
- <p>最后更新时间:{{ lastUpdateTime | date: 'yyyy-MM-dd HH:mm:ss' }}</p>
|
|
|
|
|
|
|
+ <p>
|
|
|
|
|
+ 最后更新时间:{{ lastUpdateTime | date: 'yyyy-MM-dd HH:mm:ss' }}
|
|
|
|
|
+ </p>
|
|
|
</nz-page-header-content>
|
|
</nz-page-header-content>
|
|
|
</nz-page-header>
|
|
</nz-page-header>
|
|
|
|
|
|
|
|
<nz-spin [nzSpinning]="isLoading" nzTip="数据加载中...">
|
|
<nz-spin [nzSpinning]="isLoading" nzTip="数据加载中...">
|
|
|
- <nz-card nzTitle="用户卡片:当日日活 + 日活曲线" nzHoverable class="stack-card">
|
|
|
|
|
|
|
+ <nz-card
|
|
|
|
|
+ nzTitle="用户卡片:当日日活 + 日活曲线"
|
|
|
|
|
+ nzHoverable
|
|
|
|
|
+ class="stack-card"
|
|
|
|
|
+ >
|
|
|
<nz-statistic
|
|
<nz-statistic
|
|
|
[nzTitle]="'当日日活(DAU)'"
|
|
[nzTitle]="'当日日活(DAU)'"
|
|
|
[nzValue]="activeUsersToday"
|
|
[nzValue]="activeUsersToday"
|
|
@@ -56,13 +67,38 @@ import { NzMessageService } from 'ng-zorro-antd/message';
|
|
|
</ng-template>
|
|
</ng-template>
|
|
|
|
|
|
|
|
<div class="range-buttons">
|
|
<div class="range-buttons">
|
|
|
- <button type="button" class="range-btn" [class.active]="selectedDauRange === 7" (click)="changeDauRange(7)">7天</button>
|
|
|
|
|
- <button type="button" class="range-btn" [class.active]="selectedDauRange === 14" (click)="changeDauRange(14)">14天</button>
|
|
|
|
|
- <button type="button" class="range-btn" [class.active]="selectedDauRange === 30" (click)="changeDauRange(30)">30天</button>
|
|
|
|
|
|
|
+ <button
|
|
|
|
|
+ type="button"
|
|
|
|
|
+ class="range-btn"
|
|
|
|
|
+ [class.active]="selectedDauRange === 7"
|
|
|
|
|
+ (click)="changeDauRange(7)"
|
|
|
|
|
+ >
|
|
|
|
|
+ 7天
|
|
|
|
|
+ </button>
|
|
|
|
|
+ <button
|
|
|
|
|
+ type="button"
|
|
|
|
|
+ class="range-btn"
|
|
|
|
|
+ [class.active]="selectedDauRange === 14"
|
|
|
|
|
+ (click)="changeDauRange(14)"
|
|
|
|
|
+ >
|
|
|
|
|
+ 14天
|
|
|
|
|
+ </button>
|
|
|
|
|
+ <button
|
|
|
|
|
+ type="button"
|
|
|
|
|
+ class="range-btn"
|
|
|
|
|
+ [class.active]="selectedDauRange === 30"
|
|
|
|
|
+ (click)="changeDauRange(30)"
|
|
|
|
|
+ >
|
|
|
|
|
+ 30天
|
|
|
|
|
+ </button>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="chart-wrapper">
|
|
<div class="chart-wrapper">
|
|
|
- <svg viewBox="0 0 600 180" class="line-chart" preserveAspectRatio="none">
|
|
|
|
|
|
|
+ <svg
|
|
|
|
|
+ viewBox="0 0 600 180"
|
|
|
|
|
+ class="line-chart"
|
|
|
|
|
+ preserveAspectRatio="none"
|
|
|
|
|
+ >
|
|
|
<polyline
|
|
<polyline
|
|
|
*ngIf="dauChartPoints"
|
|
*ngIf="dauChartPoints"
|
|
|
[attr.points]="dauChartPoints"
|
|
[attr.points]="dauChartPoints"
|
|
@@ -113,10 +149,19 @@ import { NzMessageService } from 'ng-zorro-antd/message';
|
|
|
</div>
|
|
</div>
|
|
|
</nz-card>
|
|
</nz-card>
|
|
|
|
|
|
|
|
- <nz-card nzTitle="作品卡片:最近7天上新作品表现" nzHoverable class="stack-card">
|
|
|
|
|
- <nz-tabset [nzSelectedIndex]="activeArtworkTabIndex" (nzSelectedIndexChange)="activeArtworkTabIndex = $event">
|
|
|
|
|
|
|
+ <nz-card
|
|
|
|
|
+ nzTitle="作品卡片:最近7天上新作品表现"
|
|
|
|
|
+ nzHoverable
|
|
|
|
|
+ class="stack-card"
|
|
|
|
|
+ >
|
|
|
|
|
+ <nz-tabset
|
|
|
|
|
+ [nzSelectedIndex]="activeArtworkTabIndex"
|
|
|
|
|
+ (nzSelectedIndexChange)="activeArtworkTabIndex = $event"
|
|
|
|
|
+ >
|
|
|
<nz-tab *ngFor="let tab of artworkTabs" [nzTitle]="tab.label">
|
|
<nz-tab *ngFor="let tab of artworkTabs" [nzTitle]="tab.label">
|
|
|
- <div class="tab-subtitle">{{ tab.date }} · 当日DAU {{ tab.dau }}</div>
|
|
|
|
|
|
|
+ <div class="tab-subtitle">
|
|
|
|
|
+ {{ tab.date }} · 当日DAU {{ tab.dau }}
|
|
|
|
|
+ </div>
|
|
|
|
|
|
|
|
<nz-table
|
|
<nz-table
|
|
|
#worksTable
|
|
#worksTable
|
|
@@ -148,7 +193,11 @@ import { NzMessageService } from 'ng-zorro-antd/message';
|
|
|
/>
|
|
/>
|
|
|
</td>
|
|
</td>
|
|
|
<td>
|
|
<td>
|
|
|
- <a [href]="getArtworkDetailUrl(work.resId)" target="_blank" rel="noopener noreferrer">
|
|
|
|
|
|
|
+ <a
|
|
|
|
|
+ [href]="getArtworkDetailUrl(work.resId)"
|
|
|
|
|
+ target="_blank"
|
|
|
|
|
+ rel="noopener noreferrer"
|
|
|
|
|
+ >
|
|
|
{{ work.name }}
|
|
{{ work.name }}
|
|
|
</a>
|
|
</a>
|
|
|
</td>
|
|
</td>
|
|
@@ -160,7 +209,7 @@ import { NzMessageService } from 'ng-zorro-antd/message';
|
|
|
completionRate: work.completionRate,
|
|
completionRate: work.completionRate,
|
|
|
areaCountFloor: work.areaCountFloor,
|
|
areaCountFloor: work.areaCountFloor,
|
|
|
totalStartCount: work.clickCount,
|
|
totalStartCount: work.clickCount,
|
|
|
- totalDoneCount: work.completionCount
|
|
|
|
|
|
|
+ totalDoneCount: work.completionCount,
|
|
|
}"
|
|
}"
|
|
|
></art-done-rate>
|
|
></art-done-rate>
|
|
|
</td>
|
|
</td>
|
|
@@ -171,7 +220,9 @@ import { NzMessageService } from 'ng-zorro-antd/message';
|
|
|
</tbody>
|
|
</tbody>
|
|
|
</nz-table>
|
|
</nz-table>
|
|
|
|
|
|
|
|
- <div class="empty-tip" *ngIf="tab.artworks.length === 0">当日无上新作品</div>
|
|
|
|
|
|
|
+ <div class="empty-tip" *ngIf="tab.artworks.length === 0">
|
|
|
|
|
+ 当日无上新作品
|
|
|
|
|
+ </div>
|
|
|
</nz-tab>
|
|
</nz-tab>
|
|
|
</nz-tabset>
|
|
</nz-tabset>
|
|
|
</nz-card>
|
|
</nz-card>
|
|
@@ -331,7 +382,11 @@ export class DashboardComponent implements OnInit {
|
|
|
const minVal = this.dauMin;
|
|
const minVal = this.dauMin;
|
|
|
const maxVal = this.dauMax;
|
|
const maxVal = this.dauMax;
|
|
|
const span = Math.max(1, maxVal - minVal);
|
|
const span = Math.max(1, maxVal - minVal);
|
|
|
- return this.chartHeight - this.chartPadding - ((value - minVal) / span) * (this.chartHeight - this.chartPadding * 2);
|
|
|
|
|
|
|
+ return (
|
|
|
|
|
+ this.chartHeight -
|
|
|
|
|
+ this.chartPadding -
|
|
|
|
|
+ ((value - minVal) / span) * (this.chartHeight - this.chartPadding * 2)
|
|
|
|
|
+ );
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
onChartMouseMove(event: MouseEvent): void {
|
|
onChartMouseMove(event: MouseEvent): void {
|
|
@@ -342,7 +397,9 @@ export class DashboardComponent implements OnInit {
|
|
|
|
|
|
|
|
let index = 0;
|
|
let index = 0;
|
|
|
if (this.dauTrendData.length > 1) {
|
|
if (this.dauTrendData.length > 1) {
|
|
|
- const stepX = (this.chartWidth - this.chartPadding * 2) / (this.dauTrendData.length - 1);
|
|
|
|
|
|
|
+ const stepX =
|
|
|
|
|
+ (this.chartWidth - this.chartPadding * 2) /
|
|
|
|
|
+ (this.dauTrendData.length - 1);
|
|
|
index = Math.round((localX - this.chartPadding) / stepX);
|
|
index = Math.round((localX - this.chartPadding) / stepX);
|
|
|
index = Math.max(0, Math.min(this.dauTrendData.length - 1, index));
|
|
index = Math.max(0, Math.min(this.dauTrendData.length - 1, index));
|
|
|
this.hoveredDauX = this.chartPadding + index * stepX;
|
|
this.hoveredDauX = this.chartPadding + index * stepX;
|
|
@@ -369,16 +426,15 @@ export class DashboardComponent implements OnInit {
|
|
|
window.open(imageUrl, '_blank', 'noopener,noreferrer');
|
|
window.open(imageUrl, '_blank', 'noopener,noreferrer');
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- private applyDauData(dau: { today: number; trend: Array<{ date: string; dau: number }> }): void {
|
|
|
|
|
|
|
+ private applyDauData(dau: {
|
|
|
|
|
+ today: number;
|
|
|
|
|
+ trend: Array<{ date: string; dau: number }>;
|
|
|
|
|
+ }): void {
|
|
|
this.activeUsersToday = dau.today;
|
|
this.activeUsersToday = dau.today;
|
|
|
this.dauTrendLabels = dau.trend.map((item) => item.date);
|
|
this.dauTrendLabels = dau.trend.map((item) => item.date);
|
|
|
this.dauTrendData = dau.trend.map((item) => item.dau);
|
|
this.dauTrendData = dau.trend.map((item) => item.dau);
|
|
|
- this.dauMin = this.dauTrendData.length
|
|
|
|
|
- ? Math.min(...this.dauTrendData)
|
|
|
|
|
- : 0;
|
|
|
|
|
- this.dauMax = this.dauTrendData.length
|
|
|
|
|
- ? Math.max(...this.dauTrendData)
|
|
|
|
|
- : 0;
|
|
|
|
|
|
|
+ this.dauMin = this.dauTrendData.length ? Math.min(...this.dauTrendData) : 0;
|
|
|
|
|
+ this.dauMax = this.dauTrendData.length ? Math.max(...this.dauTrendData) : 0;
|
|
|
this.dauTrendStartDate = this.dauTrendLabels[0] || '';
|
|
this.dauTrendStartDate = this.dauTrendLabels[0] || '';
|
|
|
this.dauTrendEndDate =
|
|
this.dauTrendEndDate =
|
|
|
this.dauTrendLabels[this.dauTrendLabels.length - 1] || '';
|
|
this.dauTrendLabels[this.dauTrendLabels.length - 1] || '';
|