mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-18 22:33:50 +02:00
improve: UI (#1152)
* improve: UI (#1033) * fix: instance activity chart not displaying properly * fix
This commit is contained in:
pa
GitHub
@@ -15,8 +15,8 @@
|
||||
</div>
|
||||
|
||||
<i
|
||||
class="el-icon-info"
|
||||
slot="reference"
|
||||
class="el-icon-info"
|
||||
style="margin-left: 5px; font-size: 12px; opacity: 0.7"
|
||||
></i>
|
||||
</el-popover>
|
||||
@@ -103,7 +103,7 @@
|
||||
</div>
|
||||
|
||||
<transition name="el-fade-in-linear">
|
||||
<div v-show="isDetailVisible && !isLoading" class="divider">
|
||||
<div v-show="isDetailVisible && !isLoading && !activityData.length === 0" class="divider">
|
||||
<el-divider>·</el-divider>
|
||||
</div>
|
||||
</transition>
|
||||
@@ -255,19 +255,19 @@
|
||||
},
|
||||
async mounted() {
|
||||
try {
|
||||
this.getAllDateOfActivity();
|
||||
const [echartsModule] = await Promise.all([
|
||||
// lazy load echarts
|
||||
utils.loadEcharts().catch((error) => {
|
||||
console.error('lazy load echarts failed', error);
|
||||
return null;
|
||||
}),
|
||||
this.getActivityData(),
|
||||
this.getAllDateOfActivity()
|
||||
this.getActivityData()
|
||||
]);
|
||||
if (echartsModule) {
|
||||
this.echarts = echartsModule;
|
||||
}
|
||||
if (this.activityData.length && this.echarts) {
|
||||
if (echartsModule) {
|
||||
// activity data is ready, but world name data isn't ready
|
||||
// so init echarts with empty data, reduce the render time of init screen
|
||||
this.initEcharts(true);
|
||||
@@ -284,10 +284,12 @@
|
||||
this.isLoading = true;
|
||||
await this.getActivityData();
|
||||
this.getWorldNameData();
|
||||
// possibility past 24:00
|
||||
this.getAllDateOfActivity();
|
||||
},
|
||||
|
||||
// echarts - start
|
||||
initEcharts(isFirstTime = false) {
|
||||
initEcharts() {
|
||||
const chartsHeight = this.activityData.length * (this.barWidth + 10) + 200;
|
||||
const chartDom = this.$refs.activityChartRef;
|
||||
if (!this.echartsInstance) {
|
||||
@@ -322,11 +324,13 @@
|
||||
}
|
||||
};
|
||||
|
||||
this.echartsInstance.setOption(this.getNewOption(isFirstTime), { lazyUpdate: true });
|
||||
const options = this.activityData.length ? this.getNewOption() : {};
|
||||
|
||||
this.echartsInstance.setOption(options, { lazyUpdate: true });
|
||||
this.echartsInstance.on('click', 'yAxis', handleClickYAxisLabel);
|
||||
this.isLoading = false;
|
||||
},
|
||||
getNewOption(isFirstTime) {
|
||||
getNewOption() {
|
||||
const getTooltip = (params) => {
|
||||
const activityData = this.activityData;
|
||||
const param = params[1];
|
||||
@@ -412,17 +416,15 @@
|
||||
color: 'transparent'
|
||||
}
|
||||
},
|
||||
data: isFirstTime
|
||||
? []
|
||||
: this.activityData.map((item, idx) => {
|
||||
if (idx === 0) {
|
||||
const midnight = dayjs.tz(this.selectedDate).startOf('day');
|
||||
if (midnight.isAfter(item.joinTime)) {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
return item.joinTime - dayjs.tz(this.selectedDate).startOf('day');
|
||||
})
|
||||
data: this.activityData.map((item, idx) => {
|
||||
if (idx === 0) {
|
||||
const midnight = dayjs.tz(this.selectedDate).startOf('day');
|
||||
if (midnight.isAfter(item.joinTime)) {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
return item.joinTime - dayjs.tz(this.selectedDate).startOf('day');
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Time',
|
||||
@@ -439,19 +441,17 @@
|
||||
shadowOffsetX: 0.7,
|
||||
shadowOffsetY: 0.5
|
||||
},
|
||||
data: isFirstTime
|
||||
? []
|
||||
: this.activityData.map((item, idx) => {
|
||||
// If the joinTime of the first data is on the previous day,
|
||||
// and the data traverses midnight, the duration starts at midnight
|
||||
if (idx === 0) {
|
||||
const midnight = dayjs.tz(this.selectedDate).startOf('day');
|
||||
if (midnight.isAfter(item.joinTime)) {
|
||||
return item.leaveTime - dayjs.tz(midnight);
|
||||
}
|
||||
}
|
||||
return item.time;
|
||||
})
|
||||
data: this.activityData.map((item, idx) => {
|
||||
// If the joinTime of the first data is on the previous day,
|
||||
// and the data traverses midnight, the duration starts at midnight
|
||||
if (idx === 0) {
|
||||
const midnight = dayjs.tz(this.selectedDate).startOf('day');
|
||||
if (midnight.isAfter(item.joinTime)) {
|
||||
return item.leaveTime - dayjs.tz(midnight);
|
||||
}
|
||||
}
|
||||
return item.time;
|
||||
})
|
||||
}
|
||||
],
|
||||
backgroundColor: 'transparent'
|
||||
@@ -545,7 +545,8 @@
|
||||
}
|
||||
})
|
||||
);
|
||||
if (this.worldNameArray && this.echartsInstance) {
|
||||
|
||||
if (this.worldNameArray) {
|
||||
this.initEcharts();
|
||||
}
|
||||
},
|
||||
@@ -599,9 +600,11 @@
|
||||
this.API.currentUser.id
|
||||
);
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.handleIntersectionObserver();
|
||||
});
|
||||
if (this.activityDetailData.length) {
|
||||
this.$nextTick(() => {
|
||||
this.handleIntersectionObserver();
|
||||
});
|
||||
}
|
||||
},
|
||||
handleSplitActivityDetailData(activityDetailData, currentUserId) {
|
||||
function countTargetIdOccurrences(innerArray, targetId) {
|
||||
@@ -685,11 +688,7 @@
|
||||
|
||||
// intersection observer - start
|
||||
handleIntersectionObserver() {
|
||||
if (!this.$refs.activityDetailChartRef) {
|
||||
console.error('handleIntersectionObserver failed');
|
||||
return;
|
||||
}
|
||||
this.$refs.activityDetailChartRef.forEach((child, index) => {
|
||||
this.$refs.activityDetailChartRef?.forEach((child, index) => {
|
||||
const observer = new IntersectionObserver(this.handleIntersection.bind(this, index));
|
||||
observer.observe(child.$el);
|
||||
this.intersectionObservers[index] = observer;
|
||||
@@ -771,7 +770,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 200px;
|
||||
margin-top: 100px;
|
||||
color: #5c5c5c;
|
||||
}
|
||||
.divider {
|
||||
|
||||
Reference in New Issue
Block a user