From f221b43a10c98e6b8012e35f2c26ae6e354a797f Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Sat, 22 Feb 2025 18:30:42 +0900
Subject: [PATCH] improve: instance activity chart (#1144)

* improve: instance activity chart

* wip: ?

* Wrong commit

* add prev/next day btn, bar width setting, i18n

* add show solo, no friend instance btn, add friend icon, i18n

* add favorite friend icon, tips, improve the chart display effect, and i18n
---
 src/components/charts/InstanceActivity.vue    | 640 ++++++++++++++----
 .../charts/InstanceActivityDetail.vue         | 101 ++-
 src/index.pug                                 |   6 +-
 src/localization/en/en.json                   |  24 +
 src/localization/ja/en.json                   |  25 +
 src/localization/zh-CN/en.json                |  27 +-
 src/mixins/tabs/settings.pug                  |   6 +-
 src/theme.dark.scss                           |  37 +
 src/theme.darkvanilla.scss                    |  35 +
 src/theme.darkvanillaold.scss                 |  30 +
 src/theme.material3.scss                      |  38 ++
 src/theme.pink.scss                           |  40 ++
 src/views/tabs/Charts.vue                     |  20 +-
 13 files changed, 852 insertions(+), 177 deletions(-)

diff --git a/src/components/charts/InstanceActivity.vue b/src/components/charts/InstanceActivity.vue
index b9c5c337..9c47e3ce 100644
--- a/src/components/charts/InstanceActivity.vue
+++ b/src/components/charts/InstanceActivity.vue
@@ -1,20 +1,94 @@
 <template>
     <div>
-        <div class="options-container flex-between" style="margin-top: 0">
-            <span style="margin-top: 10px">Instance Activity</span>
-            <el-date-picker
-                v-model="selectedDate"
-                type="date"
-                :clearable="false"
-                align="right"
-                :picker-options="{
-                    disabledDate: (time) => getDatePickerDisabledDate(time)
-                }"
-                @change="handleSelectDate"
-            ></el-date-picker>
+        <div class="options-container instance-activity" style="margin-top: 0">
+            <div>
+                <span>Instance Activity</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>
+                        <div>
+                            <i class="el-icon-warning-outline"></i
+                            ><i>{{ $t('view.charts.instance_activity.tips.accuracy_notice') }}</i>
+                        </div>
+                    </div>
+
+                    <i class="el-icon-info" slot="reference" style="margin-left: 5px; font-size: 12px"></i>
+                </el-popover>
+            </div>
+
+            <div>
+                <el-tooltip :content="$t('view.charts.instance_activity.refresh')" placement="top"
+                    ><el-button icon="el-icon-refresh" circle style="margin-right: 9px" @click="reloadData"></el-button
+                ></el-tooltip>
+                <el-tooltip :content="$t('view.charts.instance_activity.settings.header')" placement="top">
+                    <el-popover placement="bottom" trigger="click" style="margin-right: 9px">
+                        <div class="settings">
+                            <div>
+                                <span>{{ $t('view.charts.instance_activity.settings.bar_width') }}</span>
+                                <div>
+                                    <el-slider
+                                        v-model.lazy="barWidth"
+                                        content="bar width"
+                                        :max="50"
+                                        :min="1"
+                                        @change="changeBarWidth"
+                                    ></el-slider>
+                                </div>
+                            </div>
+                            <div>
+                                <span>{{ $t('view.charts.instance_activity.settings.show_detail') }}</span>
+                                <el-switch v-model="isDetailVisible" @change="changeIsDetailInstanceVisible">
+                                </el-switch>
+                            </div>
+                            <div v-if="isDetailVisible">
+                                <span>{{ $t('view.charts.instance_activity.settings.show_solo_instance') }}</span>
+                                <el-switch v-model="isSoloInstanceVisible" @change="changeIsSoloInstanceVisible">
+                                </el-switch>
+                            </div>
+                            <div v-if="isDetailVisible">
+                                <span>{{ $t('view.charts.instance_activity.settings.show_no_friend_instance') }}</span>
+                                <el-switch
+                                    v-model="isNoFriendInstanceVisible"
+                                    @change="changeIsNoFriendInstanceVisible"
+                                >
+                                </el-switch>
+                            </div>
+                        </div>
+
+                        <el-button slot="reference" icon="el-icon-setting" circle></el-button>
+                    </el-popover>
+                </el-tooltip>
+                <el-button-group style="margin-right: 10px">
+                    <el-tooltip :content="$t('view.charts.instance_activity.previous_day')" placement="top">
+                        <el-button
+                            icon="el-icon-arrow-left"
+                            :disabled="isPrevDayBtnDisabled"
+                            @click="changeSelectedDateFromBtn(false)"
+                        ></el-button>
+                    </el-tooltip>
+                    <el-tooltip :content="$t('view.charts.instance_activity.next_day')" placement="top">
+                        <el-button :disabled="isNextDayBtnDisabled" @click="changeSelectedDateFromBtn(true)"
+                            ><i class="el-icon-arrow-right el-icon--right"></i
+                        ></el-button>
+                    </el-tooltip>
+                </el-button-group>
+                <el-date-picker
+                    v-model="selectedDate"
+                    type="date"
+                    :clearable="false"
+                    align="right"
+                    :picker-options="{
+                        disabledDate: (time) => getDatePickerDisabledDate(time)
+                    }"
+                    @change="reloadData"
+                ></el-date-picker>
+            </div>
         </div>
         <div style="position: relative">
-            <el-statistic title="Total Online Time">
+            <el-statistic :title="$t('view.charts.instance_activity.online_time')">
                 <template #formatter>
                     <span :style="isDarkMode ? 'color:rgb(120,120,120)' : ''">{{ totalOnlineTime }}</span>
                 </template>
@@ -27,16 +101,18 @@
         </div>
 
         <transition name="el-fade-in-linear">
-            <div v-show="!isLoading && activityData.length !== 0" class="divider"><el-divider>·</el-divider></div>
+            <div v-show="isDetailVisible && !isLoading" class="divider">
+                <el-divider>·</el-divider>
+            </div>
         </transition>
         <instance-activity-detail
-            v-for="arr in activityDetailData"
-            :key="arr[0].location"
+            v-for="arr in filteredActivityDetailData"
+            :key="arr[0].location + arr[0].created_at"
             ref="activityDetailChartRef"
-            :activity-data="activityData"
             :activity-detail-data="arr"
             :is-dark-mode="isDarkMode"
-            style="width: 100%"
+            :dt-hour12="dtHour12"
+            :bar-width="barWidth"
             @open-previous-instance-info-dialog="$emit('open-previous-instance-info-dialog', $event)"
         />
     </div>
@@ -46,6 +122,7 @@
     import dayjs from 'dayjs';
     import database from '../../repository/database';
     import utils from '../../classes/utils';
+    import configRepository from '../../repository/config';
     import InstanceActivityDetail from './InstanceActivityDetail.vue';
 
     let echarts = null;
@@ -57,22 +134,31 @@
         },
         inject: ['API'],
         props: {
-            getWorldName: Function,
-            isDarkMode: Boolean
+            getWorldName: { type: Function, default: () => [] },
+            isDarkMode: Boolean,
+            dtHour12: Boolean,
+            friendsMap: Map,
+            localFavoriteFriends: Set
         },
         data() {
             return {
+                // echarts and observer
                 echartsInstance: null,
                 resizeObserver: null,
                 intersectionObservers: [],
                 selectedDate: dayjs().add(-1, 'day'),
+                // data
                 activityData: [],
                 activityDetailData: [],
-                // previousDarkMode: this.isDarkMode,
                 allDateOfActivity: null,
-                firstDateOfActivity: null,
                 worldNameArray: [],
-                isLoading: true
+                // options
+                isLoading: true,
+                // settings
+                barWidth: 30,
+                isDetailVisible: true,
+                isSoloInstanceVisible: true,
+                isNoFriendInstanceVisible: true
             };
         },
         computed: {
@@ -81,21 +167,65 @@
                     this.activityData.reduce((acc, item) => acc + item.time, 0),
                     true
                 );
+            },
+            isNextDayBtnDisabled() {
+                return dayjs(this.selectedDate).isSame(dayjs(), 'day');
+            },
+            isPrevDayBtnDisabled() {
+                return dayjs(this.selectedDate).isSame(
+                    this.allDateOfActivityArray[this.allDateOfActivityArray.length - 1],
+                    'day'
+                );
+            },
+            allDateOfActivityArray() {
+                return this.allDateOfActivity
+                    ? Array.from(this.allDateOfActivity)
+                          .map((item) => dayjs(item))
+                          .sort((a, b) => b.valueOf() - a.valueOf())
+                    : [];
+            },
+            filteredActivityDetailData() {
+                if (!this.isDetailVisible) {
+                    return [];
+                }
+                let result = [...this.activityDetailData];
+                if (!this.isSoloInstanceVisible) {
+                    result = result.filter((arr) => arr.length > 1);
+                }
+                if (!this.isNoFriendInstanceVisible) {
+                    result = result.filter((arr) => {
+                        // solo instance
+                        if (arr.length === 1) {
+                            return true;
+                        }
+                        return arr.some((item) => item.isFriend);
+                    });
+                }
+                return result;
+            }
+        },
+        watch: {
+            isDarkMode() {
+                if (this.echartsInstance) {
+                    this.echartsInstance.dispose();
+                    this.echartsInstance = null;
+                    this.initEcharts();
+                }
+            },
+            dtHour12() {
+                if (this.echartsInstance) {
+                    this.initEcharts();
+                }
             }
         },
         activated() {
             // first time also call activated
-            if (!this.echartsInstance) {
-                return;
+            if (this.echartsInstance) {
+                this.reloadData();
             }
-            // if (this.isDarkMode === this.previousDarkMode) {
-            // when tab activated, play animation
-            this.echartsInstance.clear();
-            this.initEcharts();
-            // }
         },
         deactivated() {
-            // prevent switch tab play resize animation
+            // prevent resize animation when switch tab
             this.resizeObserver.disconnect();
         },
         created() {
@@ -109,6 +239,18 @@
                     });
                 }
             });
+            configRepository.getInt('VRCX_InstanceActivityBarWidth', 30).then((value) => {
+                this.barWidth = value;
+            });
+            configRepository.getBool('VRCX_InstanceActivityDetailVisible', true).then((value) => {
+                this.isDetailVisible = value;
+            });
+            configRepository.getBool('VRCX_InstanceActivitySoloInstanceVisible', true).then((value) => {
+                this.isSoloInstanceVisible = value;
+            });
+            configRepository.getBool('VRCX_InstanceActivityNoFriendInstaceVisible', true).then((value) => {
+                this.isNoFriendInstanceVisible = value;
+            });
         },
         async mounted() {
             try {
@@ -128,7 +270,6 @@
                 if (this.activityData.length && 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
-                    // TODO: move to created lifecycle, init screen faster
                     this.initEcharts(true);
                     this.getAllDateOfActivity();
                     this.getWorldNameData();
@@ -140,14 +281,15 @@
             }
         },
         methods: {
-            // reload data
-            async handleSelectDate() {
+            async reloadData() {
                 this.isLoading = true;
                 await this.getActivityData();
                 this.getWorldNameData();
             },
+
+            // echarts - start
             initEcharts(isFirstTime = false) {
-                const chartsHeight = this.activityData.length * 40 + 200;
+                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}`, {
@@ -163,101 +305,27 @@
                     }
                 });
 
-                requestAnimationFrame(() => {
-                    this.echartsInstance.setOption(this.getNewOption(isFirstTime), { lazyUpdate: true });
-                    this.echartsInstance.on('click', 'yAxis', this.handleClickYAxisLabel);
-                    this.isLoading = false;
-                });
-            },
-            handleClickYAxisLabel(params) {
-                const detailDataIdx = this.activityDetailData.findIndex(
-                    (arr) => arr[0]?.location === this.activityData[params?.dataIndex]?.location
-                );
-                if (detailDataIdx !== -1) {
-                    this.$refs.activityDetailChartRef[detailDataIdx].$el.scrollIntoView({
-                        behavior: 'smooth',
-                        block: 'start'
+                const handleClickYAxisLabel = (params) => {
+                    const detailDataIdx = this.filteredActivityDetailData.findIndex((arr) => {
+                        const sameLocation = arr[0]?.location === this.activityData[params?.dataIndex]?.location;
+                        const sameJoinTime = arr
+                            .find((item) => item.user_id === this.API.currentUser.id)
+                            .joinTime.isSame(this.activityData[params?.dataIndex].joinTime);
+                        return sameLocation && sameJoinTime;
                     });
-                }
-            },
-            getDatePickerDisabledDate(time) {
-                if (time > Date.now() || time < this.firstDateOfActivity) {
-                    return true;
-                }
-                return !this.allDateOfActivity.has(dayjs(time).format('YYYY-MM-DD'));
-            },
-            async getAllDateOfActivity() {
-                const utcDateStrings = await database.getDateOfInstanceActivity();
-
-                const uniqueDates = new Set();
-                this.firstDateOfActivity = dayjs.utc(utcDateStrings[0]).startOf('day');
-
-                for (const utcString of utcDateStrings) {
-                    const formattedDate = dayjs.utc(utcString).tz().format('YYYY-MM-DD');
-                    uniqueDates.add(formattedDate);
-                }
-
-                this.allDateOfActivity = uniqueDates;
-            },
-            async getActivityData() {
-                const localStartDate = dayjs.tz(this.selectedDate).startOf('day').toISOString();
-                const localEndDate = dayjs.tz(this.selectedDate).endOf('day').toISOString();
-                const dbData = await database.getInstanceActivity(localStartDate, localEndDate);
-
-                const transformData = (item) => ({
-                    ...item,
-                    joinTime: dayjs(item.created_at).subtract(item.time, 'millisecond'),
-                    leaveTime: dayjs(item.created_at),
-                    time: item.time < 0 ? 0 : item.time
-                });
-
-                this.activityData = dbData.currentUserData.map(transformData);
-
-                // FIXME: some detail data missing current user activity
-                this.activityDetailData = Array.from(dbData.detailData.values()).map((arr) =>
-                    arr.map(transformData).sort((a, b) => {
-                        const timeDiff = Math.abs(a.joinTime.diff(b.joinTime, 'second'));
-                        // recording delay, under 2s is considered the same time entry, beautify the chart
-                        if (timeDiff < 2) {
-                            return a.leaveTime - b.leaveTime;
-                        }
-                        return a.joinTime - b.joinTime;
-                    })
-                );
-                this.$nextTick(() => {
-                    this.handleIntersectionObserver();
-                });
-            },
-            handleIntersectionObserver() {
-                this.$refs.activityDetailChartRef.forEach((child, index) => {
-                    const observer = new IntersectionObserver(this.handleIntersection.bind(this, index));
-                    observer.observe(child.$el);
-                    this.intersectionObservers[index] = observer;
-                });
-            },
-            handleIntersection(index, entries) {
-                entries.forEach((entry) => {
-                    if (entry.isIntersecting) {
-                        this.$refs.activityDetailChartRef[index].initEcharts();
-                        this.intersectionObservers[index].unobserve(entry.target);
+                    if (detailDataIdx === -1) {
+                        console.error('handleClickYAxisLabel failed', params);
+                    } else {
+                        this.$refs.activityDetailChartRef[detailDataIdx].$el.scrollIntoView({
+                            behavior: 'smooth',
+                            block: 'start'
+                        });
                     }
-                });
-            },
-            async getWorldNameData() {
-                this.worldNameArray = await Promise.all(
-                    this.activityData.map(async (item) => {
-                        try {
-                            return await this.getWorldName(item.location);
-                        } catch {
-                            // TODO: no notification
-                            console.error('getWorldName failed location', item.location);
-                            return 'Unknown world';
-                        }
-                    })
-                );
-                if (this.worldNameArray && this.echartsInstance) {
-                    this.initEcharts();
-                }
+                };
+
+                this.echartsInstance.setOption(this.getNewOption(isFirstTime), { lazyUpdate: true });
+                this.echartsInstance.on('click', 'yAxis', handleClickYAxisLabel);
+                this.isLoading = false;
             },
             getNewOption(isFirstTime) {
                 const getTooltip = (params) => {
@@ -270,8 +338,10 @@
 
                     const instanceData = activityData[param.dataIndex];
 
-                    const formattedLeftDateTime = dayjs(instanceData.leaveTime).format('HH:mm:ss');
-                    const formattedJoinDateTime = dayjs(instanceData.joinTime).format('HH:mm:ss');
+                    const format = this.dtHour12 ? 'hh:mm:ss A' : 'HH:mm:ss';
+
+                    const formattedLeftDateTime = dayjs(instanceData.leaveTime).format(format);
+                    const formattedJoinDateTime = dayjs(instanceData.joinTime).format(format);
 
                     const timeString = utils.timeToText(param.data, true);
                     const color = param.color;
@@ -290,6 +360,8 @@
                     `;
                 };
 
+                const format = this.dtHour12 ? 'hh:mm A' : 'HH:mm';
+
                 const echartsOption = {
                     tooltip: {
                         trigger: 'axis',
@@ -322,8 +394,7 @@
                         interval: 3 * 60 * 60 * 1000,
                         axisLine: { show: true },
                         axisLabel: {
-                            formatter: (value) =>
-                                value === 24 * 60 * 60 * 1000 ? '24:00' : dayjs(value).utc().format('HH:mm')
+                            formatter: (value) => dayjs(value).utc().format(format)
                         },
                         splitLine: { lineStyle: { type: 'dashed' } }
                     },
@@ -359,7 +430,10 @@
                             type: 'bar',
                             stack: 'Total',
                             colorBy: 'data',
-                            barWidth: 30,
+                            barWidth: this.barWidth,
+                            emphasis: {
+                                focus: 'self'
+                            },
                             itemStyle: {
                                 borderRadius: 2,
                                 shadowBlur: 2,
@@ -380,24 +454,311 @@
                                       return item.time;
                                   })
                         }
-                    ]
+                    ],
+                    backgroundColor: 'transparent'
                 };
 
-                if (this.isDarkMode) {
-                    echartsOption.backgroundColor = 'rgba(0, 0, 0, 0)';
-                }
                 return echartsOption;
+            },
+            // echarts - end
+
+            // settings - start
+            changeBarWidth(value) {
+                this.barWidth = value;
+                this.initEcharts();
+                configRepository.setInt('VRCX_InstanceActivityBarWidth', value).finally(() => {
+                    this.handleChangeSettings();
+                });
+            },
+            changeIsDetailInstanceVisible(value) {
+                this.isDetailVisible = value;
+                configRepository.setBool('VRCX_InstanceActivityDetailVisible', value).finally(() => {
+                    this.handleChangeSettings();
+                });
+            },
+            changeIsSoloInstanceVisible(value) {
+                this.isSoloInstanceVisible = value;
+                configRepository.setBool('VRCX_InstanceActivitySoloInstanceVisible', value).finally(() => {
+                    this.handleChangeSettings();
+                });
+            },
+            changeIsNoFriendInstanceVisible(value) {
+                this.isNoFriendInstanceVisible = value;
+                configRepository.setBool('VRCX_InstanceActivityNoFriendInstaceVisible', value).finally(() => {
+                    this.handleChangeSettings();
+                });
+            },
+            handleChangeSettings() {
+                this.$nextTick(() => {
+                    if (this.$refs.activityDetailChartRef) {
+                        this.$refs.activityDetailChartRef.forEach((child) => {
+                            requestAnimationFrame(() => {
+                                if (child.echartsInstance) {
+                                    child.initEcharts();
+                                }
+                            });
+                        });
+                    }
+                });
+                //rerender detail chart
+            },
+            // settings - end
+
+            // options - start
+            changeSelectedDateFromBtn(isNext = false) {
+                const idx = this.allDateOfActivityArray.findIndex((date) => date.isSame(this.selectedDate, 'day'));
+                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();
+                        }
+                    } else if (idx + 1 >= 0) {
+                        this.selectedDate = this.allDateOfActivityArray[idx + 1];
+                        this.reloadData();
+                    }
+                }
+            },
+            getDatePickerDisabledDate(time) {
+                if (
+                    time > Date.now() ||
+                    this.allDateOfActivityArray[this.allDateOfActivityArray.length - 1]
+                        .add('-1', 'day')
+                        .isAfter(time, 'day') ||
+                    !this.allDateOfActivity
+                ) {
+                    return true;
+                }
+                return !this.allDateOfActivity.has(dayjs(time).format('YYYY-MM-DD'));
+            },
+            // options - end
+
+            // data - start
+            async getWorldNameData() {
+                this.worldNameArray = await Promise.all(
+                    this.activityData.map(async (item) => {
+                        try {
+                            return await this.getWorldName(item.location);
+                        } catch {
+                            // TODO: no notification
+                            console.error('getWorldName failed location', item.location);
+                            return 'Unknown world';
+                        }
+                    })
+                );
+                if (this.worldNameArray && this.echartsInstance) {
+                    this.initEcharts();
+                }
+            },
+            async getAllDateOfActivity() {
+                const utcDateStrings = await database.getDateOfInstanceActivity();
+                const uniqueDates = new Set();
+
+                for (const utcString of utcDateStrings) {
+                    const formattedDate = dayjs.utc(utcString).tz().format('YYYY-MM-DD');
+                    uniqueDates.add(formattedDate);
+                }
+
+                this.allDateOfActivity = uniqueDates;
+            },
+            async getActivityData() {
+                const localStartDate = dayjs.tz(this.selectedDate).startOf('day').toISOString();
+                const localEndDate = dayjs.tz(this.selectedDate).endOf('day').toISOString();
+                const dbData = await database.getInstanceActivity(localStartDate, localEndDate);
+
+                const transformData = (item) => ({
+                    ...item,
+                    joinTime: dayjs(item.created_at).subtract(item.time, 'millisecond'),
+                    leaveTime: dayjs(item.created_at),
+                    time: item.time < 0 ? 0 : item.time,
+                    isFriend: item.user_id === this.API.currentUser.id ? null : this.friendsMap.has(item.user_id),
+                    isFavorite:
+                        item.user_id === this.API.currentUser.id ? null : this.localFavoriteFriends.has(item.user_id)
+                });
+
+                this.activityData = dbData.currentUserData.map(transformData);
+
+                const transformAndSort = (arr) => {
+                    return arr.map(transformData).sort((a, b) => {
+                        const timeDiff = Math.abs(a.joinTime.diff(b.joinTime, 'second'));
+                        // recording delay, under 3s is considered the same time entry, beautify the chart
+                        return timeDiff < 3 ? a.leaveTime - b.leaveTime : a.joinTime - b.joinTime;
+                    });
+                };
+
+                const filterByLocation = (innerArray, locationSet) => {
+                    return innerArray.every((innerObject) => locationSet.has(innerObject.location));
+                };
+                const locationSet = new Set(this.activityData.map((item) => item.location));
+
+                const preSplitActivityDetailData = Array.from(dbData.detailData.values())
+                    .map(transformAndSort)
+                    .filter((innerArray) => filterByLocation(innerArray, locationSet));
+
+                this.activityDetailData = this.handleSplitActivityDetailData(
+                    preSplitActivityDetailData,
+                    this.API.currentUser.id
+                );
+
+                this.$nextTick(() => {
+                    this.handleIntersectionObserver();
+                });
+            },
+            handleSplitActivityDetailData(activityDetailData, currentUserId) {
+                function countTargetIdOccurrences(innerArray, targetId) {
+                    let count = 0;
+                    for (const obj of innerArray) {
+                        if (obj.user_id === targetId) {
+                            count++;
+                        }
+                    }
+                    return count;
+                }
+
+                function areIntervalsOverlapping(objA, objB) {
+                    const isObj1EndTimeBeforeObj2StartTime = objA.leaveTime.isBefore(objB.joinTime, 'second');
+                    const isObj2EndTimeBeforeObj1StartTime = objB.leaveTime.isBefore(objA.joinTime, 'second');
+                    return !(isObj1EndTimeBeforeObj2StartTime || isObj2EndTimeBeforeObj1StartTime);
+                }
+
+                function buildOverlapGraph(innerArray) {
+                    const numObjects = innerArray.length;
+                    const adjacencyList = Array.from({ length: numObjects }, () => []);
+
+                    for (let i = 0; i < numObjects; i++) {
+                        for (let j = i + 1; j < numObjects; j++) {
+                            if (areIntervalsOverlapping(innerArray[i], innerArray[j])) {
+                                adjacencyList[i].push(j);
+                                adjacencyList[j].push(i);
+                            }
+                        }
+                    }
+                    return adjacencyList;
+                }
+
+                function depthFirstSearch(nodeIndex, visited, graph, component) {
+                    visited[nodeIndex] = true;
+                    component.push(nodeIndex);
+                    for (const neighborIndex of graph[nodeIndex]) {
+                        if (!visited[neighborIndex]) {
+                            depthFirstSearch(neighborIndex, visited, graph, component);
+                        }
+                    }
+                }
+
+                function findConnectedComponents(graph, numNodes) {
+                    const visited = new Array(numNodes).fill(false);
+                    const components = [];
+
+                    for (let i = 0; i < numNodes; i++) {
+                        if (!visited[i]) {
+                            const component = [];
+                            depthFirstSearch(i, visited, graph, component);
+                            components.push(component);
+                        }
+                    }
+                    return components;
+                }
+
+                function processOuterArrayWithTargetId(outerArray, targetId) {
+                    let i = 0;
+                    while (i < outerArray.length) {
+                        let currentInnerArray = outerArray[i];
+                        let targetIdCount = countTargetIdOccurrences(currentInnerArray, targetId);
+                        if (targetIdCount > 1) {
+                            let graph = buildOverlapGraph(currentInnerArray);
+                            let connectedComponents = findConnectedComponents(graph, currentInnerArray.length);
+                            let newInnerArrays = connectedComponents.map((componentIndices) => {
+                                return componentIndices.map((index) => currentInnerArray[index]);
+                            });
+                            outerArray.splice(i, 1, ...newInnerArrays);
+                            i += newInnerArrays.length;
+                        } else {
+                            i += 1;
+                        }
+                    }
+                    return outerArray.sort((a, b) => a[0].joinTime - b[0].joinTime);
+                }
+
+                return processOuterArrayWithTargetId(activityDetailData, currentUserId);
+            },
+            // data - end
+
+            // intersection observer - start
+            handleIntersectionObserver() {
+                this.$refs.activityDetailChartRef.forEach((child, index) => {
+                    const observer = new IntersectionObserver(this.handleIntersection.bind(this, index));
+                    observer.observe(child.$el);
+                    this.intersectionObservers[index] = observer;
+                });
+            },
+            handleIntersection(index, entries) {
+                entries.forEach((entry) => {
+                    if (entry.isIntersecting) {
+                        this.$refs.activityDetailChartRef[index].initEcharts();
+                        this.intersectionObservers[index].unobserve(entry.target);
+                    }
+                });
             }
+            // intersection observer - end
         }
     };
 </script>
 
-<style scoped>
-    .flex-between {
+<style lang="scss" scoped>
+    %flex {
         display: flex;
         align-items: center;
+    }
+    %flex-between {
         justify-content: space-between;
     }
+    .instance-activity {
+        @extend %flex;
+        @extend %flex-between;
+        & > div:first-child {
+            @extend %flex-between;
+        }
+        & > div {
+            @extend %flex;
+            > span {
+                flex-shrink: 0;
+            }
+        }
+    }
+    .tips-popover {
+        :first-child {
+            font-size: 14px;
+            font-weight: bold;
+            margin-bottom: 5px;
+        }
+        :not(:first-child) {
+            margin-bottom: 5px;
+            font-size: 12px;
+        }
+        i {
+            margin-right: 3px;
+        }
+    }
+    .settings {
+        & > div {
+            @extend %flex;
+            @extend %flex-between;
+            padding: 0 2px;
+            height: 30px;
+            > span {
+                flex-shrink: 0;
+            }
+        }
+        & > div:first-child {
+            > div {
+                width: 160px;
+                padding-left: 15px;
+            }
+        }
+    }
+
     .nodata {
         display: flex;
         align-items: center;
@@ -410,6 +771,7 @@
         transition: top 0.3s ease;
     }
 
+    // override el-ui
     .el-date-editor.el-input,
     .el-date-editor.el-input__inner {
         width: 200px;
diff --git a/src/components/charts/InstanceActivityDetail.vue b/src/components/charts/InstanceActivityDetail.vue
index 41688abf..119d5bf8 100644
--- a/src/components/charts/InstanceActivityDetail.vue
+++ b/src/components/charts/InstanceActivityDetail.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div style="width: 100%">
         <div style="height: 25px; margin-top: 60px">
             <transition name="el-fade-in-linear">
                 <location
@@ -30,13 +30,18 @@
                 type: Array,
                 required: true
             },
-            activityData: {
-                type: Array,
-                required: true
-            },
             isDarkMode: {
                 type: Boolean,
                 required: true
+            },
+            dtHour12: {
+                type: Boolean,
+                required: true
+            },
+            barWidth: {
+                type: Number,
+                required: true,
+                default: 10
             }
         },
         data() {
@@ -48,16 +53,30 @@
         },
         computed: {
             startTimeStamp() {
-                return this.activityData
-                    .find((item) => item.location === this.activityDetailData[0].location)
+                return this.activityDetailData
+                    .find((item) => item.user_id === this.API.currentUser.id)
                     ?.joinTime.valueOf();
             },
             endTimeStamp() {
-                return this.activityData
-                    .findLast((item) => item.location === this.activityDetailData[0].location)
+                return this.activityDetailData
+                    .find((item) => item.user_id === this.API.currentUser.id)
                     ?.leaveTime.valueOf();
             }
         },
+        watch: {
+            isDarkMode() {
+                if (this.echartsInstance) {
+                    this.echartsInstance.dispose();
+                    this.echartsInstance = null;
+                    this.initEcharts();
+                }
+            },
+            dtHour12() {
+                if (this.echartsInstance) {
+                    this.initEcharts();
+                }
+            }
+        },
         created() {
             this.resizeObserver = new ResizeObserver((entries) => {
                 for (const entry of entries) {
@@ -70,38 +89,46 @@
                 }
             });
         },
+        mounted() {
+            this.initEcharts(true);
+        },
         deactivated() {
             // prevent switch tab play resize animation
             this.resizeObserver.disconnect();
         },
 
         methods: {
-            async initEcharts() {
+            async initEcharts(isFirstLoad = false) {
                 // TODO: unnecessary import, import from individual js file
                 await import('echarts').then((echartsModule) => {
                     echarts = echartsModule;
                 });
+                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}`, {
-                        height: this.activityDetailData.length * 40 + 200,
-                        useDirtyRect: this.activityDetailData.length > 30
+                        height: chartsHeight,
+                        useDirtyRect: this.activityDetailData.length > 80
                     });
                     this.resizeObserver.observe(chartDom);
                 }
 
                 this.echartsInstance.resize({
-                    height: this.activityDetailData.length * 40 + 200,
+                    height: chartsHeight,
                     animation: {
                         duration: 300
                     }
                 });
 
-                this.echartsInstance.setOption(this.getNewOption(), { lazyUpdate: true });
+                this.echartsInstance.setOption(isFirstLoad ? {} : this.getNewOption(), { lazyUpdate: true });
                 this.echartsInstance.on('click', 'yAxis', this.handleClickYAxisLabel);
 
                 setTimeout(() => {
                     this.isLoading = false;
+                    this.echartsInstance.dispatchAction({
+                        type: 'highlight',
+                        seriesIndex: 3 //  对于 seriesLayoutBy: 'row'，seriesIndex 对应行索引
+                    });
                 }, 200);
             },
             handleClickYAxisLabel(params) {
@@ -111,6 +138,22 @@
                 }
             },
             getNewOption() {
+                const friendOrFavIcon = (display_name) => {
+                    const foundItem = this.activityDetailData.find((item) => item.display_name === display_name);
+
+                    if (!foundItem) {
+                        return '';
+                    }
+
+                    if (foundItem.isFavorite) {
+                        return '⭐';
+                    }
+                    if (foundItem.isFriend) {
+                        return '💚';
+                    }
+                    return '';
+                };
+
                 const getTooltip = (params) => {
                     const activityDetailData = this.activityDetailData;
                     const param = params[1];
@@ -121,8 +164,9 @@
 
                     const instanceData = activityDetailData[param.dataIndex];
 
-                    const formattedLeftDateTime = dayjs(instanceData.leaveTime).format('HH:mm:ss');
-                    const formattedJoinDateTime = dayjs(instanceData.joinTime).format('HH:mm:ss');
+                    const format = this.dtHour12 ? 'hh:mm:ss A' : 'HH:mm:ss';
+                    const formattedLeftDateTime = dayjs(instanceData.leaveTime).format(format);
+                    const formattedJoinDateTime = dayjs(instanceData.joinTime).format(format);
 
                     const timeString = utils.timeToText(instanceData.time, true);
                     const color = param.color;
@@ -131,7 +175,7 @@
                         <div style="display: flex; align-items: center;">
                             <div style="width: 10px; height: 55px; background-color: ${color}; margin-right: 5px;"></div>
                             <div>
-                                <div>${instanceData.display_name}</div>
+                                <div>${instanceData.display_name} ${friendOrFavIcon(instanceData.display_name)}</div>
                                 <div>${formattedJoinDateTime} - ${formattedLeftDateTime}</div>
                                 <div>${timeString}</div>
                             </div>
@@ -139,6 +183,8 @@
                     `;
                 };
 
+                const format = this.dtHour12 ? 'hh:mm A' : 'HH:mm';
+
                 const echartsOption = {
                     tooltip: {
                         trigger: 'axis',
@@ -148,7 +194,7 @@
                         formatter: getTooltip
                     },
                     grid: {
-                        top: 60,
+                        top: 50,
                         left: 160,
                         right: 90
                     },
@@ -156,7 +202,11 @@
                         type: 'category',
                         axisLabel: {
                             interval: 0,
-                            formatter: (value) => (value.length > 20 ? `${value.slice(0, 20)}...` : value)
+                            formatter: (value) => {
+                                const MAX_LENGTH = 20;
+                                const len = value.length;
+                                return `${friendOrFavIcon(value)} ${len > MAX_LENGTH ? `${value.substring(0, MAX_LENGTH)}...` : value}`;
+                            }
                         },
                         inverse: true,
                         data: this.activityDetailData.map((item) => item.display_name),
@@ -168,7 +218,7 @@
                         max: this.endTimeStamp - this.startTimeStamp,
                         axisLine: { show: true },
                         axisLabel: {
-                            formatter: (value) => dayjs(value + this.startTimeStamp).format('HH:mm')
+                            formatter: (value) => dayjs(value + this.startTimeStamp).format(format)
                         },
                         splitLine: { lineStyle: { type: 'dashed' } }
                     },
@@ -194,7 +244,10 @@
                             type: 'bar',
                             stack: 'Total',
                             colorBy: 'data',
-                            barWidth: 30,
+                            barWidth: this.barWidth,
+                            emphasis: {
+                                focus: 'self'
+                            },
                             itemStyle: {
                                 borderRadius: 2,
                                 shadowBlur: 2,
@@ -203,12 +256,10 @@
                             },
                             data: this.activityDetailData.map((item) => item.time)
                         }
-                    ]
+                    ],
+                    backgroundColor: 'rgba(0, 0, 0, 0)'
                 };
 
-                if (this.isDarkMode) {
-                    echartsOption.backgroundColor = 'rgba(0, 0, 0, 0)';
-                }
                 return echartsOption;
             }
         }
diff --git a/src/index.pug b/src/index.pug
index cd424a09..54ae722a 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -106,7 +106,11 @@ html
                         v-if='$refs.menu?.activeIndex === "charts"'
                         :get-world-name='getWorldName'
                         :is-dark-mode='isDarkMode'
-                        @open-previous-instance-info-dialog='showPreviousInstanceInfoDialog')
+                        :dt-hour12='dtHour12'
+                        @open-previous-instance-info-dialog='showPreviousInstanceInfoDialog'
+                        :friends-map='friends'
+                        :local-favorite-friends='localFavoriteFriends'
+                        )
 
                 //- settings
                 include ./mixins/tabs/settings.pug
diff --git a/src/localization/en/en.json b/src/localization/en/en.json
index 91c7cd77..96c94a78 100644
--- a/src/localization/en/en.json
+++ b/src/localization/en/en.json
@@ -218,6 +218,30 @@
             "clear_tooltip": "Clear Results",
             "cancel_tooltip": "Cancel"
         },
+        "charts": {
+            "header": "Charts",
+            "instance_activity": {
+                "header": "Instance Activity",
+                "online_time": "Online Time",
+                "previous_day": "Previous Day",
+                "next_day": "Next Day",
+                "refresh": "Refresh",
+                "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.",
+                    "accuracy_notice": "Info from local database may not be accurate"
+                },
+                "settings": {
+                    "header": "Settings",
+                    "bar_width": "Bar Width",
+                    "show_solo_instance": "Show Solo Instance",
+                    "show_no_friend_instance": "Show No Friend Instance",
+                    "show_detail": "Show Detail"
+                }
+            }
+        },
         "profile": {
             "profile": {
                 "header": "Profile",
diff --git a/src/localization/ja/en.json b/src/localization/ja/en.json
index 52d79e2c..5a72d538 100644
--- a/src/localization/ja/en.json
+++ b/src/localization/ja/en.json
@@ -11,6 +11,7 @@
         "moderation": "モデレーション",
         "notification": "通知",
         "friend_list": "フレンドリスト",
+        "charts": "チャート",
         "profile": "プロフィール",
         "settings": "設定"
     },
@@ -217,6 +218,30 @@
             "clear_tooltip": "結果を消去",
             "cancel_tooltip": "キャンセル"
         },
+        "charts": {
+            "header": "チャート",
+            "instance_activity": {
+                "header": "インスタンスアクティビティ",
+                "online_time": "オンライン時間",
+                "previous_day": "前日",
+                "next_day": "翌日",
+                "refresh": "更新",
+                "tips": {
+                    "header": "ヒント",
+                    "online_time": "オンライン時間とは、VRCXが記録した当日のゲームプレイ時間です。",
+                    "click_Y_axis": "Y軸ラベルをクリックでプレイヤー/ワールドダイアログを表示します。",
+                    "click_instance_name": "インスタンス名をクリックで以前のインスタンス情報ダイアログを表示します。",
+                    "accuracy_notice": "ローカルデータベースからの情報であり、正確ではない可能性があります。"
+                },
+                "settings": {
+                    "header": "設定",
+                    "bar_width": "棒グラフ幅",
+                    "show_solo_instance": "一人インスタンス",
+                    "show_no_friend_instance": "フレンドなしインスタンス",
+                    "show_detail": "インスタンス詳細"
+                }
+            }
+        },
         "profile": {
             "profile": {
                 "header": "プロフィール",
diff --git a/src/localization/zh-CN/en.json b/src/localization/zh-CN/en.json
index a7540fb1..8d7abb57 100644
--- a/src/localization/zh-CN/en.json
+++ b/src/localization/zh-CN/en.json
@@ -11,6 +11,7 @@
         "moderation": "用户管理（屏蔽 / 静音）",
         "notification": "通知",
         "friend_list": "好友列表",
+        "charts": "图表",
         "profile": "个人信息",
         "settings": "设置"
     },
@@ -217,6 +218,30 @@
             "clear_tooltip": "清除结果",
             "cancel_tooltip": "取消"
         },
+        "charts": {
+            "header": "图表",
+            "instance_activity": {
+                "header": "Instance Activity",
+                "online_time": "在线时长",
+                "previous_day": "前一天",
+                "next_day": "后一天",
+                "refresh": "刷新",
+                "tips": {
+                    "header": "提示",
+                    "online_time": "在线时间是指VRCX记录地当天的游戏时间。",
+                    "click_Y_axis": "点击Y轴标签打开“玩家“、“世界“对话框。",
+                    "click_instance_name": "点击房间名称查看上个“曾加入的房间信息“对话框。",
+                    "accuracy_notice": "本地数据库的数据可能不准确。"
+                },
+                "settings": {
+                    "header": "设置",
+                    "bar_width": "柱条宽度",
+                    "show_solo_instance": "显示独自一人的房间",
+                    "show_no_friend_instance": "显示没有好友的房间",
+                    "show_detail": "显示详细房间"
+                }
+            }
+        },
         "profile": {
             "profile": {
                 "header": "个人信息",
@@ -2017,4 +2042,4 @@
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/mixins/tabs/settings.pug b/src/mixins/tabs/settings.pug
index d75c0cd9..e2598ccd 100644
--- a/src/mixins/tabs/settings.pug
+++ b/src/mixins/tabs/settings.pug
@@ -241,12 +241,12 @@ mixin settingsTab
                                 el-dropdown-item(
                                     v-text='$t("view.settings.appearance.appearance.theme_mode_dark")'
                                     @click.native='saveThemeMode("dark")')
-                                el-dropdown-item(
-                                    v-text='$t("view.settings.appearance.appearance.theme_mode_darkvanillaold")'
-                                    @click.native='saveThemeMode("darkvanillaold")')
                                 el-dropdown-item(
                                     v-text='$t("view.settings.appearance.appearance.theme_mode_darkvanilla")'
                                     @click.native='saveThemeMode("darkvanilla")')
+                                el-dropdown-item(
+                                    v-text='$t("view.settings.appearance.appearance.theme_mode_darkvanillaold")'
+                                    @click.native='saveThemeMode("darkvanillaold")')
                                 el-dropdown-item(
                                     v-text='$t("view.settings.appearance.appearance.theme_mode_pink")'
                                     @click.native='saveThemeMode("pink")')
diff --git a/src/theme.dark.scss b/src/theme.dark.scss
index 2f9147cd..ea2b437d 100644
--- a/src/theme.dark.scss
+++ b/src/theme.dark.scss
@@ -439,3 +439,40 @@ button {
     background: #222;
     color: #ffffff;
 }
+.el-backtop {
+    background-color: #333;
+}
+
+// Date picker
+.el-date-picker {
+    background-color: #222;
+    color: #fff;
+}
+.el-date-table td.disabled div {
+    background-color: #333;
+    color: #606266;
+}
+.el-date-table td.next-month,
+.el-date-table td.prev-month {
+    color: #606266;
+}
+.el-picker-panel__icon-btn {
+    color: #fff;
+}
+.el-date-table th {
+    border-bottom: 1px solid #555;
+    color: #fff;
+}
+.el-date-picker__header-label {
+    color: #fff;
+}
+.el-picker-panel {
+    border: 1px solid #333;
+}
+.el-year-table td.disabled .cell {
+    background-color: rgba(0, 0, 0, 0.2);
+}
+.el-month-table td.disabled .cell {
+    background-color: rgba(0, 0, 0, 0.2);
+}
+// Date picker end
diff --git a/src/theme.darkvanilla.scss b/src/theme.darkvanilla.scss
index abe6715f..a91cfe70 100644
--- a/src/theme.darkvanilla.scss
+++ b/src/theme.darkvanilla.scss
@@ -704,3 +704,38 @@ i[class='el-icon-star-off']:not(.el-menu-item div.el-tooltip i) {
     color: #efefef;
     padding-bottom: 2px;
 }
+.el-backtop {
+    background-color: var(--dv_bg-top);
+    color: var(--dv_muted);
+}
+
+// Date picker
+.el-date-picker {
+    background-color: var(--dv_bg-top);
+}
+.el-date-table td.current:not(.disabled) span {
+    background-color: var(--dv_muted);
+}
+.el-date-table td.today span {
+    color: var(--dv_muted);
+}
+.el-date-table td.available:hover span {
+    background-color: var(--dv_muted);
+    color: #fff;
+}
+.el-date-table td.available:hover {
+    color: #fff
+}
+.el-year-table td .cell:hover, .el-year-table td.current:not(.disabled) .cell {
+    color: var(--dv_muted);
+}
+.el-month-table td.current:not(.disabled) .cell {
+    color: var(--dv_muted);
+}
+.el-date-picker__header-label.active, .el-date-picker__header-label:hover {
+    color: var(--dv_muted);
+}
+.el-picker-panel__icon-btn:hover {
+    color: var(--dv_muted);
+}
+// Date picker end
diff --git a/src/theme.darkvanillaold.scss b/src/theme.darkvanillaold.scss
index 92032e05..c79dc6fd 100644
--- a/src/theme.darkvanillaold.scss
+++ b/src/theme.darkvanillaold.scss
@@ -325,3 +325,33 @@ path[stroke='#e5e9f2'] {
     background: var(--farback);
     color: #efefef;
 }
+.el-backtop {
+    color: var(--theme-text-muted)
+}
+
+// Date picker
+.el-date-table td.current:not(.disabled) span {
+    background-color: var(--theme-text-muted);
+}
+.el-date-table td.today span {
+    color: var(--theme-text-muted);
+}
+.el-date-table td.available:hover span {
+    background-color: var(--theme-text-muted);
+    color: #fff;
+}
+.el-date-table td.available:hover {
+    color: #fff
+}
+.el-year-table td .cell:hover, .el-year-table td.current:not(.disabled) .cell {
+    color: var(--theme-text-muted);
+}
+.el-month-table td.current:not(.disabled) .cell {
+    color: var(--theme-text-muted);
+}
+.el-date-picker__header-label.active, .el-date-picker__header-label:hover {
+    color: var(--theme-text-muted);
+}
+.el-picker-panel__icon-btn:hover {
+    color: var(--theme-text-muted);
+}
diff --git a/src/theme.material3.scss b/src/theme.material3.scss
index abb52c9e..ee0d3a1c 100644
--- a/src/theme.material3.scss
+++ b/src/theme.material3.scss
@@ -2019,3 +2019,41 @@ i.x-user-status {
     background: rgba(var(--md-sys-color-background));
     color: #efefef;
 }
+.el-backtop {
+    background: var(--md-sys-color-surface-1);
+    color: rgb(var(--md-sys-color-primary));
+}
+
+// Date picker
+.el-date-table td.available:hover span {
+    color: #fff;
+}
+.el-date-table td.available:hover {
+    color: #fff
+}
+.el-date-table td.disabled div {
+    background-color: rgb(48, 46, 53)
+}
+.el-date-table td.current:not(.disabled) span
+{
+    background: var(--md-sys-color-surface-2);
+    color: #fff;
+}
+.el-date-table td.today span {
+    color: rgb(var(--md-sys-color-primary-container));
+}
+.el-year-table td .cell:hover, .el-year-table td.current:not(.disabled) .cell {
+    color:  rgb(48, 46, 53);
+}
+.el-month-table td.current:not(.disabled) .cell {
+    color:  rgb(48, 46, 53);
+}
+.el-date-picker__header-label.active, .el-date-picker__header-label:hover {
+    color:  rgb(48, 46, 53);
+}
+.el-picker-panel__icon-btn:hover {
+    color:  rgb(48, 46, 53);
+}
+.el-month-table td .cell:hover {
+    color:  rgb(48, 46, 53);
+}
diff --git a/src/theme.pink.scss b/src/theme.pink.scss
index 2cdd3ebc..44f831e7 100644
--- a/src/theme.pink.scss
+++ b/src/theme.pink.scss
@@ -373,3 +373,43 @@ input[type='checkbox']:checked + .el-switch__core {
     background: var(--bg);
     color: #efefef;
 }
+.el-backtop {
+    background: var(--lighter-bg);
+    color: var(--theme)
+}
+
+// Date picker
+.el-date-picker {
+    background-color: var(--lighter-bg);
+}
+.el-date-table td.current:not(.disabled) span {
+    background-color: var(--lighter-bg);
+}
+.el-date-table td.today span {
+    color: var(--theme);
+}
+.el-date-table td.available:hover span {
+    background-color: var(--lighter-bg);
+    color: #fff;
+}
+.el-date-table td.available:hover {
+    color: #fff
+}
+.el-year-table td .cell:hover, .el-year-table td.current:not(.disabled) .cell {
+    color: var(--theme);
+}
+.el-month-table td.current:not(.disabled) .cell {
+    color: var(--theme);
+}
+.el-date-picker__header-label.active, .el-date-picker__header-label:hover {
+    color: var(--theme);
+}
+.el-picker-panel__icon-btn:hover {
+    color: var(--theme);
+}
+.el-month-table td .cell:hover {
+    color: var(--theme);
+}
+.el-date-table td.disabled div {
+    background-color: #3a2b2b
+}
diff --git a/src/views/tabs/Charts.vue b/src/views/tabs/Charts.vue
index 21538f1e..1988c6f1 100644
--- a/src/views/tabs/Charts.vue
+++ b/src/views/tabs/Charts.vue
@@ -1,13 +1,15 @@
 <template>
-    <div class="x-container" id="chart">
+    <div id="chart" class="x-container">
         <div class="options-container" style="margin-top: 0">
-            <span class="header">Charts</span>
+            <span class="header">{{ $t('view.charts.header') }}</span>
         </div>
         <instance-activity
             :get-world-name="getWorldName"
             :is-dark-mode="isDarkMode"
+            :dt-hour12="dtHour12"
+            :friends-map="friendsMap"
+            :localFavoriteFriends="localFavoriteFriends"
             @open-previous-instance-info-dialog="$emit('open-previous-instance-info-dialog', $event)"
-            id="instance-activity"
         ></instance-activity>
         <el-backtop target="#chart" :right="30" :bottom="30"></el-backtop>
     </div>
@@ -17,13 +19,15 @@
     import InstanceActivity from '../../components/charts/InstanceActivity.vue';
     export default {
         name: 'ChartsTab',
-        inject: ['API'],
-        props: {
-            getWorldName: Function,
-            isDarkMode: Boolean
-        },
         components: {
             InstanceActivity
+        },
+        props: {
+            getWorldName: Function,
+            isDarkMode: Boolean,
+            dtHour12: Boolean,
+            friendsMap: Map,
+            localFavoriteFriends: Set
         }
     };
 </script>