🎨

packages/client/src/components/MkFolder.vue

@@ -8,7 +8,8 @@
 			<template v-else><i class="ti ti-chevron-down"></i></template>
 		</button>
 	</header>
-	<transition :name="$store.state.animation ? 'folder-toggle' : ''"
+	<transition
+		:name="$store.state.animation ? 'folder-toggle' : ''"
 		@enter="enter"
 		@after-enter="afterEnter"
 		@leave="leave"
@@ -121,6 +122,8 @@ export default defineComponent({
 		backdrop-filter: var(--blur, blur(20px));
 
 		> .title {
+			display: grid;
+			place-content: center;
 			margin: 0;
 			padding: 12px 16px 12px 0;
 

packages/client/src/pages/admin/overview.ap-requests.vue

@@ -2,10 +2,15 @@
 <div>
 	<MkLoading v-if="fetching"/>
 	<div v-show="!fetching" :class="$style.root">
-		<div class="chart _panel">
+		<div class="charts _panel">
+			<div class="chart">
+				<canvas ref="chartEl2"></canvas>
+			</div>
+			<div class="chart">
 				<canvas ref="chartEl"></canvas>
 			</div>
 		</div>
+	</div>
 </div>
 </template>
 
@@ -58,19 +63,13 @@ 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>();
 let fetching = $ref(true);
 
 const { handler: externalTooltipHandler } = useChartTooltip();
+const { handler: externalTooltipHandler2 } = useChartTooltip();
 
 onMounted(async () => {
 	const now = new Date();
@@ -101,8 +100,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 = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--success')).toHexString();
-	const failColor = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--error')).toHexString();
+	const succColor = '#4fd60c';
+	const failColor = '#e8681e';
 
 	const succMax = Math.max(...raw.deliverSucceeded);
 	const failMax = Math.max(...raw.deliverFailed);
@@ -113,27 +112,17 @@ onMounted(async () => {
 	new Chart(chartEl, {
 		type: 'bar',
 		data: {
-			//labels: new Array(props.limit).fill(0).map((_, i) => getDate(i).toLocaleString()).slice().reverse(),
 			datasets: [{
 				stack: 'a',
 				parsing: false,
-				label: 'Succ',
+				label: 'Out: Succ',
 				data: format(raw.deliverSucceeded).slice().reverse(),
 				tension: 0.3,
 				pointRadius: 0,
 				borderWidth: 0,
 				borderJoinStyle: 'round',
 				borderRadius: 4,
-				//backgroundColor: alpha(color, 0.1),
-				gradient: {
-					backgroundColor: {
-						axis: 'y',
-						colors: {
-							0: alpha(succColor, 0.3),
-							[succMax]: alpha(succColor, 1),
-						},
-					},
-				},
+				backgroundColor: succColor,
 				barPercentage: 0.9,
 				categoryPercentage: 0.9,
 				fill: true,
@@ -141,23 +130,14 @@ onMounted(async () => {
 			}, {
 				stack: 'a',
 				parsing: false,
-				label: 'Fail',
+				label: 'Out: Fail',
 				data: formatMinus(raw.deliverFailed).slice().reverse(),
 				tension: 0.3,
 				pointRadius: 0,
 				borderWidth: 0,
 				borderJoinStyle: 'round',
 				borderRadius: 4,
-				//backgroundColor: alpha(color, 0.1),
-				gradient: {
-					backgroundColor: {
-						axis: 'y',
-						colors: {
-							0: alpha(failColor, 0.3),
-							[-failMax]: alpha(failColor, 1),
-						},
-					},
-				},
+				backgroundColor: failColor,
 				barPercentage: 0.9,
 				categoryPercentage: 0.9,
 				fill: true,
@@ -245,17 +225,114 @@ onMounted(async () => {
 		plugins: [chartVLine(vLineColor)],
 	});
 
+	new Chart(chartEl2, {
+		type: 'bar',
+		data: {
+			datasets: [{
+				parsing: false,
+				label: 'In',
+				data: format(raw.inboxReceived).slice().reverse(),
+				tension: 0.3,
+				pointRadius: 0,
+				borderWidth: 0,
+				borderJoinStyle: 'round',
+				borderRadius: 4,
+				backgroundColor: '#0cc2d6',
+				barPercentage: 0.9,
+				categoryPercentage: 0.9,
+				fill: true,
+				clip: 8,
+			}],
+		},
+		options: {
+			aspectRatio: 5,
+			layout: {
+				padding: {
+					left: 0,
+					right: 8,
+					top: 0,
+					bottom: 0,
+				},
+			},
+			scales: {
+				x: {
+					type: 'time',
+					offset: false,
+					time: {
+						stepSize: 1,
+						unit: 'day',
+					},
+					grid: {
+						display: false,
+						color: gridColor,
+						borderColor: 'rgb(0, 0, 0, 0)',
+					},
+					ticks: {
+						display: false,
+						maxRotation: 0,
+						autoSkipPadding: 16,
+					},
+					adapters: {
+						date: {
+							locale: enUS,
+						},
+					},
+					min: getDate(chartLimit).getTime(),
+				},
+				y: {
+					position: 'left',
+					suggestedMax: 10,
+					grid: {
+						display: false,
+						color: gridColor,
+						borderColor: 'rgb(0, 0, 0, 0)',
+					},
+				},
+			},
+			interaction: {
+				intersect: false,
+				mode: 'index',
+			},
+			elements: {
+				point: {
+					hoverRadius: 5,
+					hoverBorderWidth: 2,
+				},
+			},
+			animation: true,
+			plugins: {
+				legend: {
+					display: false,
+				},
+				tooltip: {
+					enabled: false,
+					mode: 'index',
+					animation: {
+						duration: 0,
+					},
+					external: externalTooltipHandler2,
+				},
+				gradient,
+			},
+		},
+		plugins: [chartVLine(vLineColor)],
+	});
+	
 	fetching = false;
 });
 </script>
 
 <style lang="scss" module>
 .root {
-
 	&:global {
+		> .charts {
 			> .chart {
 				padding: 16px;
-			margin-bottom: 16px;
+
+				&:first-child {
+					border-bottom: solid 0.5px var(--divider);
+				}
+			}
 		}
 	}
 }

packages/client/src/pages/admin/overview.federation.vue

@@ -96,7 +96,7 @@ onMounted(async () => {
 	&:global {
 		> .pies {
 			display: grid;
-			grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+			grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 			grid-gap: 16px;
 			margin-bottom: 16px;
 
@@ -126,7 +126,7 @@ onMounted(async () => {
 
 		> .items {
 			display: grid;
-			grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+			grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 			grid-gap: 16px;
 
 			> .item {

packages/client/src/pages/admin/overview.stats.vue

@@ -81,7 +81,7 @@ onMounted(async () => {
 <style lang="scss" module>
 .root {
 	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 	grid-gap: 16px;
 
 	&:global {

packages/client/src/pages/admin/overview.users.vue

@@ -43,7 +43,7 @@ useInterval(fetch, 1000 * 60, {
 			}
 
 			display: grid;
-			grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+			grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 			grid-gap: 12px;
 
 			> .user:hover {

packages/client/src/scripts/use-chart-tooltip.ts

@@ -41,7 +41,7 @@ export function useChartTooltip() {
 
 		tooltipShowing.value = true;
 		tooltipX.value = rect.left + window.pageXOffset + context.tooltip.caretX;
-		tooltipY.value = rect.top + window.pageYOffset + context.tooltip.caretY;
+		tooltipY.value = rect.top + window.pageYOffset;
 	}
 
 	return {