improve: Instance Activity Chart (#1150)

* improve: Instance Activity Chart

* i18n

src/classes/utils.js

@@ -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;
+        });
     }
 };

src/components/charts/InstanceActivity.vue

@@ -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
+                    utils.loadEcharts().catch((error) => {
-                    // TODO: export lazy load func to a single file
-                    import('echarts').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 {
+        & > div {
-            font-size: 14px;
-            font-weight: bold;
-            margin-bottom: 5px;
-        }
-        :not(:first-child) {
             margin-bottom: 5px;
             font-size: 12px;
         }
-        i {
+        & > div:last-child {
-            margin-right: 3px;
+            @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;
             }
         }
     }

src/components/charts/InstanceActivityDetail.vue

@@ -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
+                if (!this.echarts) {
-                await import('echarts').then((echartsModule) => {
+                    const module = await utils.loadEcharts();
-                    echarts = echartsModule;
+                    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 offset = Math.max(
-                    const tail = elements.length === 0 ? offset + entry.time : elements[elements.length - 1].tail + offset + entry.time;
+                        0,
-                    const element = { offset: offset, time: entry.time, tail: tail, entry: entry };
+                        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) => {
+                    const series = Array(maxEntryCount)
-                        return [
+                        .fill(0)
-                            placeholderSeries(uniqueUserEntries.map((entry) => {
+                        .flatMap((_, index) => {
-                                const element = userGroupedEntries.get(entry.user_id)[index];
+                            return [
-                                return element ? element.offset : 0;
+                                placeholderSeries(
-                            })),
+                                    uniqueUserEntries.map((entry) => {
-                            timeSeries(uniqueUserEntries.map((entry) => {
+                                        const element = userGroupedEntries.get(entry.user_id)[index];
-                                const element = userGroupedEntries.get(entry.user_id)[index];
+                                        return element ? element.offset : 0;
-                                return element ? element.time : 0;
+                                    })
-                            }))
+                                ),
-                        ];
+                                timeSeries(
-                    });
+                                    uniqueUserEntries.map((entry) => {
+                                        const element = userGroupedEntries.get(entry.user_id)[index];
+                                        return element ? element.time : 0;
+                                    })
+                                )
+                            ];
+                        });
 
                     return series;
                 };

src/localization/en/en.json

@@ -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_Y_axis": "Click Y-axis label to navigate to the instance details or open User dialog.",
-                    "click_instance_name": "Click instance name for previous instance info.",
+                    "click_instance_name": "Click instance name to open Previous Instance Info dialog.",
                     "accuracy_notice": "Info from local database may not be accurate"
                 },
                 "settings": {

src/localization/ja/en.json

@@ -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_Y_axis": "Y軸ラベルをクリックで、インスタンスの詳細へジャンプ、またはユーザーダイアログを表示できます。",
-                    "click_instance_name": "インスタンス名をクリックで以前のインスタンス情報ダイアログを表示します。",
+                    "click_instance_name": "インスタンス名をクリックで、以前のインスタンス情報ダイアログを表示できます。",
                     "accuracy_notice": "ローカルデータベースからの情報であり、正確ではない可能性があります。"
                 },
                 "settings": {