mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-05-05 14:26:06 +02:00
Upgrade to Vue3 and Element Plus (#1374)
* Update Vue devtools
* upgrade vue pinia element-plus vue-i18n, add vite
* fix: i18n
* global components
* change v-deep
* upgrade vue-lazyload
* data table
* update enlint and safe-dialog
* package.json and vite.config.js
* el-icon
* el-message
* vue 2 -> vue3 migration changes
* $pinia
* dialog
* el-popover slot
* lint
* chore
* slot
* scss
* remote state access
* misc
* jsconfig
* el-button size mini -> small
* :model-value
* ElMessageBox
* datatable
* remove v-lazyload
* template #dropdown
* mini -> small
* css
* byebye hideTooltips
* use sass-embedded
* Update SQLite, remove unneeded libraries
* Fix shift remove local avatar favorites
* Electron arm64
* arm64 support
* bye pug
* f-word vite hah
* misc
* remove safe dialog component
* Add self invite to launch dialog
* Fix errors
* Icons 1
* improve localfavorite loading performance
* improve favorites world item performance
* dialog visibility changes for Element Plus
* clear element plus error
* import performance
* revert App.vue hah
* hah
* Revert "Add self invite to launch dialog"
This reverts commit 4801cfad58.
* Toggle self invite/open in-game
* Self invite on launch dialog
* el-button icon
* el-icon
* fix user dialog tab switching logic
* fix PlayerList
* Formatting changes
* More icons
* Fix friend log table
* loading margin
* fix markdown
* fix world dialog tab switching issue
* Fixes and formatting
* fix: global i18n.t export
* fix favorites world tab not working
* Create instance, displayName
* Remove group members sort by userId
* Fix loading dialog tabs on swtich
* Star
* charts console.warn
* wip: fix charts
* wip: fix charts
* wip: charts composables
* fix favorite item tooltip warning
* Fixes and formatting
* Clean up image dialogs
* Remove unused method
* Fix platform/size border
* Fix platform/size border
* $vr
* fix friendExportDialogVisible binding
* ElMessageBox and Settings
* Login formatting
* Rename VR overlay query
* Fix image popover and userdialog badges
* Formatting
* Big buttons
* Fixes, update Cef
* Fix gameLog table nav buttons jumping around while using nav buttons
* Fix z-index
* vr overlay
* vite input add theme
* defineAsyncComponent
* ISO 639-1
* fix i18n
* clean t
* Formatting, fix calendar, rotate arrows
* Show user status when user is offline
* Fix VR overlay
* fix theme and clean up
* split InstanceActivity
* tweak
* Fix VR overlay formatting
* fix scss var
* AppDebug hahahaha
* Years
* remove reactive
* improve perf
* state hah…
* fix user rendering poblems when user object is not yet loaded
* improve perf
* Update avatar/world image uploader, licenses, remove previous images dialog (old images are now deleted)
* improve perf 1
* Suppress stray errors
* fix traveling location display issue
* Fix empty instance creator
* improve friend list refresh performance
* fix main charts
* fix chart
* Fix darkmode
* Fix avatar dialog tags
---------
Co-authored-by: pa <maplenagisa@gmail.com>
This commit is contained in:
Natsumi
GitHub
@@ -15,11 +15,12 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch, computed, onDeactivated, onMounted } from 'vue';
|
||||
import { ref, watch, computed, onDeactivated, onMounted, nextTick } from 'vue';
|
||||
import dayjs from 'dayjs';
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
||||
import { loadEcharts, timeToText } from '../../../shared/utils';
|
||||
import { timeToText } from '../../../shared/utils';
|
||||
import * as echarts from 'echarts';
|
||||
import { useUserStore, useAppearanceSettingsStore } from '../../../stores';
|
||||
|
||||
const { isDarkMode, dtHour12 } = storeToRefs(useAppearanceSettingsStore());
|
||||
@@ -40,7 +41,6 @@
|
||||
|
||||
const activityDetailChartRef = ref(null);
|
||||
|
||||
const echarts = ref(null);
|
||||
const isLoading = ref(true);
|
||||
const echartsInstance = ref(null);
|
||||
const usersFirstActivity = ref(null);
|
||||
@@ -76,8 +76,9 @@
|
||||
|
||||
initResizeObserver();
|
||||
|
||||
onMounted(() => {
|
||||
initEcharts(true);
|
||||
onMounted(async () => {
|
||||
await nextTick();
|
||||
initEcharts();
|
||||
});
|
||||
|
||||
onDeactivated(() => {
|
||||
@@ -87,45 +88,79 @@
|
||||
|
||||
function initResizeObserver() {
|
||||
resizeObserver.value = new ResizeObserver((entries) => {
|
||||
if (!echartsInstance.value) {
|
||||
return;
|
||||
}
|
||||
for (const entry of entries) {
|
||||
echartsInstance.value.resize({
|
||||
width: entry.contentRect.width,
|
||||
animation: {
|
||||
duration: 300
|
||||
}
|
||||
});
|
||||
try {
|
||||
echartsInstance.value.resize({
|
||||
width: entry.contentRect.width,
|
||||
animation: {
|
||||
duration: 300
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.warn('Error resizing chart:', error);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function initEcharts(isFirstLoad = false) {
|
||||
if (!echarts.value) {
|
||||
echarts.value = await loadEcharts();
|
||||
async function initEcharts() {
|
||||
if (!activityDetailChartRef.value || !props.activityDetailData || props.activityDetailData.length === 0) {
|
||||
isLoading.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const chartsHeight = props.activityDetailData.length * (props.barWidth + 10) + 200;
|
||||
const chartDom = activityDetailChartRef.value;
|
||||
if (!echartsInstance.value) {
|
||||
echartsInstance.value = echarts.value.init(chartDom, `${isDarkMode.value ? 'dark' : null}`, {
|
||||
height: chartsHeight,
|
||||
useDirtyRect: props.activityDetailData.length > 80
|
||||
});
|
||||
resizeObserver.value.observe(chartDom);
|
||||
}
|
||||
|
||||
echartsInstance.value.resize({
|
||||
height: chartsHeight,
|
||||
animation: {
|
||||
duration: 300
|
||||
const afterInit = () => {
|
||||
if (!echartsInstance.value) {
|
||||
console.error('ECharts instance not initialized');
|
||||
isLoading.value = false;
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
echartsInstance.value.setOption(isFirstLoad ? {} : getNewOption(), { lazyUpdate: true });
|
||||
echartsInstance.value.on('click', 'yAxis', handleClickYAxisLabel);
|
||||
try {
|
||||
echartsInstance.value.resize({
|
||||
height: chartsHeight,
|
||||
animation: {
|
||||
duration: 300
|
||||
}
|
||||
});
|
||||
|
||||
echartsInstance.value.off('click');
|
||||
|
||||
const options = getNewOption();
|
||||
if (options && options.series && options.series.length > 0) {
|
||||
echartsInstance.value.clear();
|
||||
echartsInstance.value.setOption(options, { notMerge: true });
|
||||
echartsInstance.value.on('click', 'yAxis', handleClickYAxisLabel);
|
||||
} else {
|
||||
echartsInstance.value.clear();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error in afterInit:', error);
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
isLoading.value = false;
|
||||
}, 200);
|
||||
};
|
||||
|
||||
const initEchartsInstance = () => {
|
||||
if (!echartsInstance.value) {
|
||||
echartsInstance.value = echarts.init(chartDom, `${isDarkMode.value ? 'dark' : null}`, {
|
||||
height: chartsHeight,
|
||||
useDirtyRect: props.activityDetailData.length > 80
|
||||
});
|
||||
if (resizeObserver.value) {
|
||||
resizeObserver.value.observe(chartDom);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
initEchartsInstance();
|
||||
setTimeout(afterInit, 50);
|
||||
}
|
||||
|
||||
function handleClickYAxisLabel(params) {
|
||||
@@ -136,6 +171,26 @@
|
||||
}
|
||||
|
||||
function getNewOption() {
|
||||
if (!props.activityDetailData || props.activityDetailData.length === 0) {
|
||||
return {
|
||||
title: {
|
||||
text: 'No data available',
|
||||
left: 'center',
|
||||
top: 'middle'
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
if (!startTimeStamp.value || !endTimeStamp.value) {
|
||||
return {
|
||||
title: {
|
||||
text: 'Invalid timestamp data',
|
||||
left: 'center',
|
||||
top: 'middle'
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// grouping player activity entries by user_id and calculate below:
|
||||
// 1. offset: the time from startTimeStamp or the previous entry's tail to the current entry's joinTime
|
||||
// 2. time: the time the user spent in the instance
|
||||
@@ -318,9 +373,10 @@
|
||||
splitLine: { lineStyle: { type: 'dashed' } }
|
||||
},
|
||||
series: generateSeries(),
|
||||
backgroundColor: 'rgba(0, 0, 0, 0)'
|
||||
backgroundColor: 'transparent'
|
||||
};
|
||||
|
||||
console.log(echartsOption);
|
||||
return echartsOption;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user