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/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>