:art:

6 files changed, 107 insertions, 99 deletions

diff --git a/packages/client/src/pages/admin/overview.active-users.vue b/packages/client/src/pages/admin/overview.active-users.vue
index eb4cefb345..c3ce5ac901 100644
--- a/packages/client/src/pages/admin/overview.active-users.vue
+++ b/packages/client/src/pages/admin/overview.active-users.vue
@@ -64,7 +64,7 @@ const alpha = (hex, a) => {
 const chartEl = $ref<HTMLCanvasElement>(null);
 const now = new Date();
 let chartInstance: Chart = null;
-const chartLimit = 50;
+const chartLimit = 7;
 let fetching = $ref(true);
 
 const { handler: externalTooltipHandler } = useChartTooltip();
@@ -97,37 +97,38 @@ async function renderChart() {
 	// フォントカラー
 	Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
 
-	const color = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--accent')).toHexString();
+	const colorRead = '#3498db';
+	const colorWrite = '#2ecc71';
 
 	const max = Math.max(...raw.read);
 
 	chartInstance = new Chart(chartEl, {
-		type: 'line',
+		type: 'bar',
 		data: {
-			//labels: new Array(props.limit).fill(0).map((_, i) => getDate(i).toLocaleString()).slice().reverse(),
 			datasets: [{
 				parsing: false,
-				label: 'active',
+				label: 'Read',
 				data: format(raw.read).slice().reverse(),
-				tension: 0.3,
 				pointRadius: 0,
-				borderWidth: 2,
-				borderColor: color,
+				borderWidth: 0,
 				borderJoinStyle: 'round',
-				//backgroundColor: alpha(color, 0.1),
-				gradient: {
-					backgroundColor: {
-						axis: 'y',
-						colors: {
-							0: alpha(color, 0),
-							[max]: alpha(color, 0.35),
-						},
-					},
-				},
-				barPercentage: 0.9,
-				categoryPercentage: 0.9,
+				borderRadius: 4,
+				backgroundColor: colorRead,
+				barPercentage: 0.7,
+				categoryPercentage: 0.5,
+				fill: true,
+			}, {
+				parsing: false,
+				label: 'Write',
+				data: format(raw.write).slice().reverse(),
+				pointRadius: 0,
+				borderWidth: 0,
+				borderJoinStyle: 'round',
+				borderRadius: 4,
+				backgroundColor: colorWrite,
+				barPercentage: 0.7,
+				categoryPercentage: 0.5,
 				fill: true,
-				clip: 8,
 			}],
 		},
 		options: {
@@ -143,7 +144,7 @@ async function renderChart() {
 			scales: {
 				x: {
 					type: 'time',
-					offset: false,
+					offset: true,
 					time: {
 						stepSize: 1,
 						unit: 'day',
@@ -156,20 +157,19 @@ async function renderChart() {
 					ticks: {
 						display: true,
 						maxRotation: 0,
-						autoSkipPadding: 16,
+						autoSkipPadding: 8,
 					},
 					adapters: {
 						date: {
 							locale: enUS,
 						},
 					},
-					min: getDate(chartLimit).getTime(),
 				},
 				y: {
 					position: 'left',
 					suggestedMax: 10,
 					grid: {
-						display: false,
+						display: true,
 						color: gridColor,
 						borderColor: 'rgb(0, 0, 0, 0)',
 					},
@@ -183,13 +183,7 @@ async function renderChart() {
 				intersect: false,
 				mode: 'index',
 			},
-			elements: {
-				point: {
-					hoverRadius: 5,
-					hoverBorderWidth: 2,
-				},
-			},
-			animation: true,
+			animation: false,
 			plugins: {
 				legend: {
 					display: false,
diff --git a/packages/client/src/pages/admin/overview.ap-requests.vue b/packages/client/src/pages/admin/overview.ap-requests.vue
index e1179181c6..024ffdc245 100644
--- a/packages/client/src/pages/admin/overview.ap-requests.vue
+++ b/packages/client/src/pages/admin/overview.ap-requests.vue
@@ -63,6 +63,14 @@ Chart.register(
 	gradient,
 );
 
+const alpha = (hex, a) => {
+	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!;
+	const r = parseInt(result[1], 16);
+	const g = parseInt(result[2], 16);
+	const b = parseInt(result[3], 16);
+	return `rgba(${r}, ${g}, ${b}, ${a})`;
+};
+
 const chartLimit = 50;
 const chartEl = $ref<HTMLCanvasElement>();
 const chartEl2 = $ref<HTMLCanvasElement>();
@@ -100,8 +108,8 @@ onMounted(async () => {
 
 	const gridColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
 	const vLineColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
-	const succColor = '#4fd60c';
-	const failColor = '#e8681e';
+	const succColor = '#87e000';
+	const failColor = '#ff4400';
 
 	const succMax = Math.max(...raw.deliverSucceeded);
 	const failMax = Math.max(...raw.deliverFailed);
@@ -110,7 +118,7 @@ onMounted(async () => {
 	Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
 
 	new Chart(chartEl, {
-		type: 'bar',
+		type: 'line',
 		data: {
 			datasets: [{
 				stack: 'a',
@@ -119,12 +127,11 @@ onMounted(async () => {
 				data: format(raw.deliverSucceeded).slice().reverse(),
 				tension: 0.3,
 				pointRadius: 0,
-				borderWidth: 0,
+				borderWidth: 2,
+				borderColor: succColor,
 				borderJoinStyle: 'round',
 				borderRadius: 4,
-				backgroundColor: succColor,
-				barPercentage: 0.9,
-				categoryPercentage: 0.9,
+				backgroundColor: alpha(succColor, 0.35),
 				fill: true,
 				clip: 8,
 			}, {
@@ -134,12 +141,11 @@ onMounted(async () => {
 				data: formatMinus(raw.deliverFailed).slice().reverse(),
 				tension: 0.3,
 				pointRadius: 0,
-				borderWidth: 0,
+				borderWidth: 2,
+				borderColor: failColor,
 				borderJoinStyle: 'round',
 				borderRadius: 4,
-				backgroundColor: failColor,
-				barPercentage: 0.9,
-				categoryPercentage: 0.9,
+				backgroundColor: alpha(failColor, 0.35),
 				fill: true,
 				clip: 8,
 			}],
@@ -164,7 +170,7 @@ onMounted(async () => {
 						unit: 'day',
 					},
 					grid: {
-						display: false,
+						display: true,
 						color: gridColor,
 						borderColor: 'rgb(0, 0, 0, 0)',
 					},
@@ -185,7 +191,7 @@ onMounted(async () => {
 					position: 'left',
 					suggestedMax: 10,
 					grid: {
-						display: false,
+						display: true,
 						color: gridColor,
 						borderColor: 'rgb(0, 0, 0, 0)',
 					},
@@ -206,7 +212,7 @@ onMounted(async () => {
 					hoverBorderWidth: 2,
 				},
 			},
-			animation: true,
+			animation: false,
 			plugins: {
 				legend: {
 					display: false,
@@ -238,7 +244,7 @@ onMounted(async () => {
 				borderJoinStyle: 'round',
 				borderRadius: 4,
 				backgroundColor: '#0cc2d6',
-				barPercentage: 0.9,
+				barPercentage: 0.8,
 				categoryPercentage: 0.9,
 				fill: true,
 				clip: 8,
@@ -283,7 +289,7 @@ onMounted(async () => {
 					position: 'left',
 					suggestedMax: 10,
 					grid: {
-						display: false,
+						display: true,
 						color: gridColor,
 						borderColor: 'rgb(0, 0, 0, 0)',
 					},
@@ -299,7 +305,7 @@ onMounted(async () => {
 					hoverBorderWidth: 2,
 				},
 			},
-			animation: true,
+			animation: false,
 			plugins: {
 				legend: {
 					display: false,
diff --git a/packages/client/src/pages/admin/overview.instances.vue b/packages/client/src/pages/admin/overview.instances.vue
index 81ce2d2802..29848bf03b 100644
--- a/packages/client/src/pages/admin/overview.instances.vue
+++ b/packages/client/src/pages/admin/overview.instances.vue
@@ -1,11 +1,13 @@
 <template>
 <div class="wbrkwale">
-	<MkLoading v-if="fetching"/>
-	<div v-else class="instances">
-		<MkA v-for="(instance, i) in instances" :key="instance.id" v-tooltip.mfm.noDelay="`${instance.name}\n${instance.host}\n${instance.softwareName} ${instance.softwareVersion}`" :to="`/instance-info/${instance.host}`" class="instance">
-			<MkInstanceCardMini :instance="instance"/>
-		</MkA>
-	</div>
+	<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
+		<MkLoading v-if="fetching"/>
+		<div v-else class="instances">
+			<MkA v-for="(instance, i) in instances" :key="instance.id" v-tooltip.mfm.noDelay="`${instance.name}\n${instance.host}\n${instance.softwareName} ${instance.softwareVersion}`" :to="`/instance-info/${instance.host}`" class="instance">
+				<MkInstanceCardMini :instance="instance"/>
+			</MkA>
+		</div>
+	</transition>
 </div>
 </template>
 
diff --git a/packages/client/src/pages/admin/overview.moderators.vue b/packages/client/src/pages/admin/overview.moderators.vue
index 971fb993d0..a1f63c8711 100644
--- a/packages/client/src/pages/admin/overview.moderators.vue
+++ b/packages/client/src/pages/admin/overview.moderators.vue
@@ -1,11 +1,13 @@
 <template>
 <div>
-	<MkLoading v-if="fetching"/>
-	<div v-else :class="$style.root" class="_panel">
-		<MkA v-for="user in moderators" :key="user.id" class="user" :to="`/user-info/${user.id}`">
-			<MkAvatar :user="user" class="avatar" :show-indicator="true" :disable-link="true"/>
-		</MkA>
-	</div>
+	<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
+		<MkLoading v-if="fetching"/>
+		<div v-else :class="$style.root" class="_panel">
+			<MkA v-for="user in moderators" :key="user.id" class="user" :to="`/user-info/${user.id}`">
+				<MkAvatar :user="user" class="avatar" :show-indicator="true" :disable-link="true"/>
+			</MkA>
+		</div>
+	</transition>
 </div>
 </template>
 
diff --git a/packages/client/src/pages/admin/overview.stats.vue b/packages/client/src/pages/admin/overview.stats.vue
index 28c5401abb..4dcf7e751a 100644
--- a/packages/client/src/pages/admin/overview.stats.vue
+++ b/packages/client/src/pages/admin/overview.stats.vue
@@ -1,46 +1,48 @@
 <template>
 <div>
-	<MkLoading v-if="fetching"/>
-	<div v-else :class="$style.root">
-		<div class="item _panel users">
-			<div class="icon"><i class="ti ti-users"></i></div>
-			<div class="body">
-				<div class="value">
-					{{ number(stats.originalUsersCount) }}
-					<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="usersComparedToThePrevDay"></MkNumberDiff>
+	<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
+		<MkLoading v-if="fetching"/>
+		<div v-else :class="$style.root">
+			<div class="item _panel users">
+				<div class="icon"><i class="ti ti-users"></i></div>
+				<div class="body">
+					<div class="value">
+						{{ number(stats.originalUsersCount) }}
+						<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="usersComparedToThePrevDay"></MkNumberDiff>
+					</div>
+					<div class="label">Users</div>
 				</div>
-				<div class="label">Users</div>
 			</div>
-		</div>
-		<div class="item _panel notes">
-			<div class="icon"><i class="ti ti-pencil"></i></div>
-			<div class="body">
-				<div class="value">
-					{{ number(stats.originalNotesCount) }}
-					<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="notesComparedToThePrevDay"></MkNumberDiff>
+			<div class="item _panel notes">
+				<div class="icon"><i class="ti ti-pencil"></i></div>
+				<div class="body">
+					<div class="value">
+						{{ number(stats.originalNotesCount) }}
+						<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="notesComparedToThePrevDay"></MkNumberDiff>
+					</div>
+					<div class="label">Notes</div>
 				</div>
-				<div class="label">Notes</div>
 			</div>
-		</div>
-		<div class="item _panel instances">
-			<div class="icon"><i class="ti ti-planet"></i></div>
-			<div class="body">
-				<div class="value">
-					{{ number(stats.instances) }}
+			<div class="item _panel instances">
+				<div class="icon"><i class="ti ti-planet"></i></div>
+				<div class="body">
+					<div class="value">
+						{{ number(stats.instances) }}
+					</div>
+					<div class="label">Instances</div>
 				</div>
-				<div class="label">Instances</div>
 			</div>
-		</div>
-		<div class="item _panel online">
-			<div class="icon"><i class="ti ti-access-point"></i></div>
-			<div class="body">
-				<div class="value">
-					{{ number(onlineUsersCount) }}
+			<div class="item _panel online">
+				<div class="icon"><i class="ti ti-access-point"></i></div>
+				<div class="body">
+					<div class="value">
+						{{ number(onlineUsersCount) }}
+					</div>
+					<div class="label">Online</div>
 				</div>
-				<div class="label">Online</div>
 			</div>
 		</div>
-	</div>
+	</transition>
 </div>
 </template>
 
diff --git a/packages/client/src/pages/admin/overview.users.vue b/packages/client/src/pages/admin/overview.users.vue
index 9747bfc3b6..5d4be11742 100644
--- a/packages/client/src/pages/admin/overview.users.vue
+++ b/packages/client/src/pages/admin/overview.users.vue
@@ -1,11 +1,13 @@
 <template>
 <div :class="$style.root">
-	<MkLoading v-if="fetching"/>
-	<div v-else class="users">
-		<MkA v-for="(user, i) in newUsers" :key="user.id" :to="`/user-info/${user.id}`" class="user">
-			<MkUserCardMini :user="user"/>
-		</MkA>
-	</div>
+	<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
+		<MkLoading v-if="fetching"/>
+		<div v-else class="users">
+			<MkA v-for="(user, i) in newUsers" :key="user.id" :to="`/user-info/${user.id}`" class="user">
+				<MkUserCardMini :user="user"/>
+			</MkA>
+		</div>
+	</transition>
 </div>
 </template>