feat(client): 自インスタンス情報ページでチャートを見れるように

CHANGELOG.md

@@ -10,6 +10,13 @@
 You should also include the user name that made the change.
 -->
 
+## 12.x.x (unreleased)
+
+### Improvements
+- クライアント: 自インスタンス情報ページでチャートを見れるように @syuilo
+
+### Bugfixes
+
 ## 12.103.1 (2022/02/02)
 
 ### Bugfixes

packages/client/src/pages/about.vue

@@ -1,5 +1,5 @@
 <template>
-<MkSpacer :content-max="600" :margin-min="20">
+<MkSpacer v-if="tab === 'overview'" :content-max="600" :margin-min="20">
 	<div class="_formRoot">
 		<div class="_formBlock fwhjspax" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }">
 			<div class="content">
@@ -65,35 +65,50 @@
 		</FormSection>
 	</div>
 </MkSpacer>
+<MkSpacer v-else-if="tab === 'charts'" :content-max="1200" :margin-min="20">
+	<MkInstanceStats :chart-limit="500" :detailed="true"/>
+</MkSpacer>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { version, instanceName } from '@/config';
 import FormLink from '@/components/form/link.vue';
 import FormSection from '@/components/form/section.vue';
 import FormSuspense from '@/components/form/suspense.vue';
 import FormSplit from '@/components/form/split.vue';
 import MkKeyValue from '@/components/key-value.vue';
+import MkInstanceStats from '@/components/instance-stats.vue';
 import * as os from '@/os';
 import number from '@/filters/number';
 import * as symbols from '@/symbols';
 import { host } from '@/config';
 import { i18n } from '@/i18n';
 
-const stats = ref(null);
+let stats = $ref(null);
+let tab = $ref('overview');
 
 const initStats = () => os.api('stats', {
 }).then((res) => {
-	stats.value = res;
+	stats = res;
 });
 
 defineExpose({
-	[symbols.PAGE_INFO]: {
+	[symbols.PAGE_INFO]: computed(() => ({
 		title: i18n.ts.instanceInfo,
 		icon: 'fas fa-info-circle',
 		bg: 'var(--bg)',
-	},
+		tabs: [{
+			active: tab === 'overview',
+			title: i18n.ts.overview,
+			onClick: () => { tab = 'overview'; },
+		}, {
+			active: tab === 'charts',
+			title: i18n.ts.charts,
+			icon: 'fas fa-chart-bar',
+			onClick: () => { tab = 'charts'; },
+		},],
+	})),
 });
 </script>