MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-11 19:03:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

improve: Instance Activity Chart (#1150)

Browse Source 
* improve: Instance Activity Chart

* i18n
This commit is contained in:
pa
2025-02-24 00:28:07 +09:00
committed by GitHub
parent 246e02e314
commit dfc0023deb
5 changed files with 89 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/classes/utils.js
View File

@@ -1,3 +1,5 @@
let echarts = null;
export default {
removeFromArray(array, item) {
var { length } = array;
@@ -319,5 +321,15 @@ export default {
return 0;
});
return node;
},
// lazy load echarts
loadEcharts() {
if (echarts) {
return Promise.resolve(echarts);
}
return import('echarts').then((module) => {
echarts = module;
return echarts;
});
}
};

56
src/components/charts/InstanceActivity.vue
View File

@@ -2,10 +2,9 @@
<div>
<div class="options-container instance-activity" style="margin-top: 0">
<div>
<span>Instance Activity</span>
<span>{{ $t('view.charts.instance_activity.header') }}</span>
<el-popover placement="bottom-start" trigger="hover" width="300">
<div class="tips-popover">
<div>{{ $t('view.charts.instance_activity.tips.header') }}</div>
<div>{{ $t('view.charts.instance_activity.tips.online_time') }}</div>
<div>{{ $t('view.charts.instance_activity.tips.click_Y_axis') }}</div>
<div>{{ $t('view.charts.instance_activity.tips.click_instance_name') }}</div>
@@ -15,7 +14,11 @@
</div>
</div>
<i class="el-icon-info" slot="reference" style="margin-left: 5px; font-size: 12px"></i>
<i
class="el-icon-info"
slot="reference"
style="margin-left: 5px; font-size: 12px; opacity: 0.7"
></i>
</el-popover>
</div>
@@ -31,7 +34,6 @@
<div>
<el-slider
v-model.lazy="barWidth"
content="bar width"
:max="50"
:min="1"
@change="changeBarWidth"
@@ -125,8 +127,6 @@
import configRepository from '../../repository/config';
import InstanceActivityDetail from './InstanceActivityDetail.vue';
let echarts = null;
export default {
name: 'InstanceActivity',
components: {
@@ -143,6 +143,7 @@
data() {
return {
// echarts and observer
echarts: null,
echartsInstance: null,
resizeObserver: null,
intersectionObservers: [],
@@ -155,7 +156,7 @@
// options
isLoading: true,
// settings
barWidth: 30,
barWidth: 25,
isDetailVisible: true,
isSoloInstanceVisible: true,
isNoFriendInstanceVisible: true
@@ -239,7 +240,7 @@
});
}
});
configRepository.getInt('VRCX_InstanceActivityBarWidth', 30).then((value) => {
configRepository.getInt('VRCX_InstanceActivityBarWidth', 25).then((value) => {
this.barWidth = value;
});
configRepository.getBool('VRCX_InstanceActivityDetailVisible', true).then((value) => {
@@ -248,7 +249,7 @@
configRepository.getBool('VRCX_InstanceActivitySoloInstanceVisible', true).then((value) => {
this.isSoloInstanceVisible = value;
});
configRepository.getBool('VRCX_InstanceActivityNoFriendInstaceVisible', true).then((value) => {
configRepository.getBool('VRCX_InstanceActivityNoFriendInstanceVisible', true).then((value) => {
this.isNoFriendInstanceVisible = value;
});
},
@@ -256,22 +257,20 @@
try {
const [echartsModule] = await Promise.all([
// lazy load echarts
// reduce the VRCX initial screen load times
// TODO: export lazy load func to a single file
import('echarts').catch((error) => {
utils.loadEcharts().catch((error) => {
console.error('lazy load echarts failed', error);
return null;
}),
this.getActivityData()
this.getActivityData(),
this.getAllDateOfActivity()
]);
if (echartsModule) {
echarts = echartsModule;
this.echarts = echartsModule;
}
if (this.activityData.length && echarts) {
if (this.activityData.length && this.echarts) {
// 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);
this.getAllDateOfActivity();
this.getWorldNameData();
} else {
this.isLoading = false;
@@ -292,7 +291,7 @@
const chartsHeight = this.activityData.length * (this.barWidth + 10) + 200;
const chartDom = this.$refs.activityChartRef;
if (!this.echartsInstance) {
this.echartsInstance = echarts.init(chartDom, `${this.isDarkMode ? 'dark' : null}`, {
this.echartsInstance = this.echarts.init(chartDom, `${this.isDarkMode ? 'dark' : null}`, {
height: chartsHeight
});
this.resizeObserver.observe(chartDom);
@@ -484,7 +483,7 @@
},
changeIsNoFriendInstanceVisible(value) {
this.isNoFriendInstanceVisible = value;
configRepository.setBool('VRCX_InstanceActivityNoFriendInstaceVisible', value).finally(() => {
configRepository.setBool('VRCX_InstanceActivityNoFriendInstanceVisible', value).finally(() => {
this.handleChangeSettings();
});
},
@@ -510,7 +509,6 @@
if (idx !== -1) {
if (isNext) {
if (idx - 1 < this.allDateOfActivityArray.length) {
console.log(this.selectedDate, this.allDateOfActivityArray[idx + 1]);
this.selectedDate = this.allDateOfActivityArray[idx - 1];
this.reloadData();
}
@@ -728,17 +726,19 @@
}
}
.tips-popover {
:first-child {
font-size: 14px;
font-weight: bold;
margin-bottom: 5px;
}
:not(:first-child) {
& > div {
margin-bottom: 5px;
font-size: 12px;
}
i {
margin-right: 3px;
& > div:last-child {
@extend %flex;
margin-top: 10px;
i {
margin-right: 3px;
}
}
& .el-icon-warning-outline {
font-size: 12px;
}
}
.settings {
@@ -754,7 +754,7 @@
& > div:first-child {
> div {
width: 160px;
padding-left: 15px;
padding-left: 20px;
}
}
}

69
src/components/charts/InstanceActivityDetail.vue
View File

@@ -20,8 +20,6 @@
import dayjs from 'dayjs';
import utils from '../../classes/utils';
let echarts = null;
export default {
name: 'InstanceActivityDetail',
inject: ['API', 'showUserDialog'],
@@ -46,6 +44,7 @@
},
data() {
return {
echarts: null,
isLoading: true,
echartsInstance: null,
usersFirstActivity: null,
@@ -100,14 +99,15 @@
methods: {
async initEcharts(isFirstLoad = false) {
// TODO: unnecessary import, import from individual js file
await import('echarts').then((echartsModule) => {
echarts = echartsModule;
});
if (!this.echarts) {
const module = await utils.loadEcharts();
this.echarts = module;
}
const chartsHeight = this.activityDetailData.length * (this.barWidth + 10) + 200;
const chartDom = this.$refs.activityDetailChart;
if (!this.echartsInstance) {
this.echartsInstance = echarts.init(chartDom, `${this.isDarkMode ? 'dark' : null}`, {
this.echartsInstance = this.echarts.init(chartDom, `${this.isDarkMode ? 'dark' : null}`, {
height: chartsHeight,
useDirtyRect: this.activityDetailData.length > 80
});
@@ -149,15 +149,25 @@
uniqueUserEntries.push(entry);
}
const elements = userGroupedEntries.get(entry.user_id);
const offset = Math.max(0, elements.length === 0 ? entry.joinTime.valueOf() - this.startTimeStamp : entry.joinTime.valueOf() - this.startTimeStamp - elements[elements.length - 1].tail);
const tail = elements.length === 0 ? offset + entry.time : elements[elements.length - 1].tail + offset + entry.time;
const element = { offset: offset, time: entry.time, tail: tail, entry: entry };
const offset = Math.max(
0,
elements.length === 0
? entry.joinTime.valueOf() - this.startTimeStamp
: entry.joinTime.valueOf() - this.startTimeStamp - elements[elements.length - 1].tail
);
const tail =
elements.length === 0
? offset + entry.time
: elements[elements.length - 1].tail + offset + entry.time;
const element = { offset, time: entry.time, tail, entry };
elements.push(element);
}
this.usersFirstActivity = uniqueUserEntries;
const generateSeries = () => {
const maxEntryCount = Math.max(...Array.from(userGroupedEntries.values()).map((entries) => entries.length));
const maxEntryCount = Math.max(
...Array.from(userGroupedEntries.values()).map((entries) => entries.length)
);
const placeholderSeries = (data) => {
return {
name: 'Placeholder',
@@ -173,7 +183,7 @@
color: 'transparent'
}
},
data: data,
data
};
};
const timeSeries = (data) => {
@@ -183,29 +193,38 @@
stack: 'Total',
colorBy: 'data',
barWidth: this.barWidth,
emphasis: {
focus: 'self'
},
itemStyle: {
borderRadius: 2,
shadowBlur: 2,
shadowOffsetX: 0.7,
shadowOffsetY: 0.5
},
data: data,
data
};
};
// generate series having placeholder and time series for each user
const series = Array(maxEntryCount).fill(0).flatMap((_, index) => {
return [
placeholderSeries(uniqueUserEntries.map((entry) => {
const element = userGroupedEntries.get(entry.user_id)[index];
return element ? element.offset : 0;
})),
timeSeries(uniqueUserEntries.map((entry) => {
const element = userGroupedEntries.get(entry.user_id)[index];
return element ? element.time : 0;
}))
];
});
const series = Array(maxEntryCount)
.fill(0)
.flatMap((_, index) => {
return [
placeholderSeries(
uniqueUserEntries.map((entry) => {
const element = userGroupedEntries.get(entry.user_id)[index];
return element ? element.offset : 0;
})
),
timeSeries(
uniqueUserEntries.map((entry) => {
const element = userGroupedEntries.get(entry.user_id)[index];
return element ? element.time : 0;
})
)
];
});
return series;
};

4
src/localization/en/en.json
View File

@@ -229,8 +229,8 @@
"tips": {
"header": "Tips",
"online_time": "Online time refers to the game time recorded by VRCX for the current day.",
"click_Y_axis": "Click Y-axis label to open user/world dialog.",
"click_instance_name": "Click instance name for previous instance info.",
"click_Y_axis": "Click Y-axis label to navigate to the instance details or open User dialog.",
"click_instance_name": "Click instance name to open Previous Instance Info dialog.",
"accuracy_notice": "Info from local database may not be accurate"
},
"settings": {

6
src/localization/ja/en.json
View File

@@ -221,7 +221,7 @@
"charts": {
"header": "チャート",
"instance_activity": {
"header": "インスタンスアクティビティ",
"header": "インスタンスログ",
"online_time": "オンライン時間",
"previous_day": "前日",
"next_day": "翌日",
@@ -229,8 +229,8 @@
"tips": {
"header": "ヒント",
"online_time": "オンライン時間とは、VRCXが記録した当日のゲームプレイ時間です。",
"click_Y_axis": "Y軸ラベルをクリックでプレイヤー/ワールドダイアログを表示します。",
"click_instance_name": "インスタンス名をクリックで以前のインスタンス情報ダイアログを表示します。",
"click_Y_axis": "Y軸ラベルをクリックで、インスタンスの詳細へジャンプ、またはユーザーダイアログを表示できます。",
"click_instance_name": "インスタンス名をクリックで、以前のインスタンス情報ダイアログを表示できます。",
"accuracy_notice": "ローカルデータベースからの情報であり、正確ではない可能性があります。"
},
"settings": {