SWREI/switched
0
0
Fork 0
Code

🎨

Browse Source
This commit is contained in:
syuilo 2022-12-26 14:34:46 +09:00
parent e0d207a173
commit be0d396106
6 changed files with 113 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
packages/client/src/pages/admin/overview.active-users.vue
View File

@ -64,7 +64,7 @@ const alpha = (hex, a) => {
const chartEl = $ref<HTMLCanvasElement>(null); const chartEl = $ref<HTMLCanvasElement>(null);
const now = new Date(); const now = new Date();
let chartInstance: Chart = null; let chartInstance: Chart = null;
const chartLimit = 50; const chartLimit = 7;
let fetching = $ref(true); let fetching = $ref(true);
const { handler: externalTooltipHandler } = useChartTooltip(); const { handler: externalTooltipHandler } = useChartTooltip();
@ -97,37 +97,38 @@ async function renderChart() {
// フォントカラー // フォントカラー
Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg'); 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); const max = Math.max(...raw.read);
chartInstance = new Chart(chartEl, { chartInstance = new Chart(chartEl, {
type: 'line', type: 'bar',
data: { data: {
//labels: new Array(props.limit).fill(0).map((_, i) => getDate(i).toLocaleString()).slice().reverse(),
datasets: [{ datasets: [{
parsing: false, parsing: false,
label: 'active', label: 'Read',
data: format(raw.read).slice().reverse(), data: format(raw.read).slice().reverse(),
tension: 0.3,
pointRadius: 0, pointRadius: 0,
borderWidth: 2, borderWidth: 0,
borderColor: color,
borderJoinStyle: 'round', borderJoinStyle: 'round',
//backgroundColor: alpha(color, 0.1), borderRadius: 4,
gradient: { backgroundColor: colorRead,
backgroundColor: { barPercentage: 0.7,
axis: 'y', categoryPercentage: 0.5,
colors: { fill: true,
0: alpha(color, 0), }, {
[max]: alpha(color, 0.35), parsing: false,
}, label: 'Write',
}, data: format(raw.write).slice().reverse(),
}, pointRadius: 0,
barPercentage: 0.9, borderWidth: 0,
categoryPercentage: 0.9, borderJoinStyle: 'round',
borderRadius: 4,
backgroundColor: colorWrite,
barPercentage: 0.7,
categoryPercentage: 0.5,
fill: true, fill: true,
clip: 8,
}], }],
}, },
options: { options: {
@ -143,7 +144,7 @@ async function renderChart() {
scales: { scales: {
x: { x: {
type: 'time', type: 'time',
offset: false, offset: true,
time: { time: {
stepSize: 1, stepSize: 1,
unit: 'day', unit: 'day',
@ -156,20 +157,19 @@ async function renderChart() {
ticks: { ticks: {
display: true, display: true,
maxRotation: 0, maxRotation: 0,
autoSkipPadding: 16, autoSkipPadding: 8,
}, },
adapters: { adapters: {
date: { date: {
locale: enUS, locale: enUS,
}, },
}, },
min: getDate(chartLimit).getTime(),
}, },
y: { y: {
position: 'left', position: 'left',
suggestedMax: 10, suggestedMax: 10,
grid: { grid: {
display: false, display: true,
color: gridColor, color: gridColor,
borderColor: 'rgb(0, 0, 0, 0)', borderColor: 'rgb(0, 0, 0, 0)',
}, },
@ -183,13 +183,7 @@ async function renderChart() {
intersect: false, intersect: false,
mode: 'index', mode: 'index',
}, },
elements: { animation: false,
point: {
hoverRadius: 5,
hoverBorderWidth: 2,
},
},
animation: true,
plugins: { plugins: {
legend: { legend: {
display: false, display: false,

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

@ -63,6 +63,14 @@ Chart.register(
gradient, 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 chartLimit = 50;
const chartEl = $ref<HTMLCanvasElement>(); const chartEl = $ref<HTMLCanvasElement>();
const chartEl2 = $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 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 vLineColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
const succColor = '#4fd60c'; const succColor = '#87e000';
const failColor = '#e8681e'; const failColor = '#ff4400';
const succMax = Math.max(...raw.deliverSucceeded); const succMax = Math.max(...raw.deliverSucceeded);
const failMax = Math.max(...raw.deliverFailed); const failMax = Math.max(...raw.deliverFailed);
@ -110,7 +118,7 @@ onMounted(async () => {
Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg'); Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
new Chart(chartEl, { new Chart(chartEl, {
type: 'bar', type: 'line',
data: { data: {
datasets: [{ datasets: [{
stack: 'a', stack: 'a',
@ -119,12 +127,11 @@ onMounted(async () => {
data: format(raw.deliverSucceeded).slice().reverse(), data: format(raw.deliverSucceeded).slice().reverse(),
tension: 0.3, tension: 0.3,
pointRadius: 0, pointRadius: 0,
borderWidth: 0, borderWidth: 2,
borderColor: succColor,
borderJoinStyle: 'round', borderJoinStyle: 'round',
borderRadius: 4, borderRadius: 4,
backgroundColor: succColor, backgroundColor: alpha(succColor, 0.35),
barPercentage: 0.9,
categoryPercentage: 0.9,
fill: true, fill: true,
clip: 8, clip: 8,
}, { }, {
@ -134,12 +141,11 @@ onMounted(async () => {
data: formatMinus(raw.deliverFailed).slice().reverse(), data: formatMinus(raw.deliverFailed).slice().reverse(),
tension: 0.3, tension: 0.3,
pointRadius: 0, pointRadius: 0,
borderWidth: 0, borderWidth: 2,
borderColor: failColor,
borderJoinStyle: 'round', borderJoinStyle: 'round',
borderRadius: 4, borderRadius: 4,
backgroundColor: failColor, backgroundColor: alpha(failColor, 0.35),
barPercentage: 0.9,
categoryPercentage: 0.9,
fill: true, fill: true,
clip: 8, clip: 8,
}], }],
@ -164,7 +170,7 @@ onMounted(async () => {
unit: 'day', unit: 'day',
}, },
grid: { grid: {
display: false, display: true,
color: gridColor, color: gridColor,
borderColor: 'rgb(0, 0, 0, 0)', borderColor: 'rgb(0, 0, 0, 0)',
}, },
@ -185,7 +191,7 @@ onMounted(async () => {
position: 'left', position: 'left',
suggestedMax: 10, suggestedMax: 10,
grid: { grid: {
display: false, display: true,
color: gridColor, color: gridColor,
borderColor: 'rgb(0, 0, 0, 0)', borderColor: 'rgb(0, 0, 0, 0)',
}, },
@ -206,7 +212,7 @@ onMounted(async () => {
hoverBorderWidth: 2, hoverBorderWidth: 2,
}, },
}, },
animation: true, animation: false,
plugins: { plugins: {
legend: { legend: {
display: false, display: false,
@ -238,7 +244,7 @@ onMounted(async () => {
borderJoinStyle: 'round', borderJoinStyle: 'round',
borderRadius: 4, borderRadius: 4,
backgroundColor: '#0cc2d6', backgroundColor: '#0cc2d6',
barPercentage: 0.9, barPercentage: 0.8,
categoryPercentage: 0.9, categoryPercentage: 0.9,
fill: true, fill: true,
clip: 8, clip: 8,
@ -283,7 +289,7 @@ onMounted(async () => {
position: 'left', position: 'left',
suggestedMax: 10, suggestedMax: 10,
grid: { grid: {
display: false, display: true,
color: gridColor, color: gridColor,
borderColor: 'rgb(0, 0, 0, 0)', borderColor: 'rgb(0, 0, 0, 0)',
}, },
@ -299,7 +305,7 @@ onMounted(async () => {
hoverBorderWidth: 2, hoverBorderWidth: 2,
}, },
}, },
animation: true, animation: false,
plugins: { plugins: {
legend: { legend: {
display: false, display: false,

14
packages/client/src/pages/admin/overview.instances.vue
View File

@ -1,11 +1,13 @@
<template> <template>
<div class="wbrkwale"> <div class="wbrkwale">
<MkLoading v-if="fetching"/> <transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
<div v-else class="instances"> <MkLoading v-if="fetching"/>
<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"> <div v-else class="instances">
<MkInstanceCardMini :instance="instance"/> <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">
</MkA> <MkInstanceCardMini :instance="instance"/>
</div> </MkA>
</div>
</transition>
</div> </div>
</template> </template>

14
packages/client/src/pages/admin/overview.moderators.vue
View File

@ -1,11 +1,13 @@
<template> <template>
<div> <div>
<MkLoading v-if="fetching"/> <transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
<div v-else :class="$style.root" class="_panel"> <MkLoading v-if="fetching"/>
<MkA v-for="user in moderators" :key="user.id" class="user" :to="`/user-info/${user.id}`"> <div v-else :class="$style.root" class="_panel">
<MkAvatar :user="user" class="avatar" :show-indicator="true" :disable-link="true"/> <MkA v-for="user in moderators" :key="user.id" class="user" :to="`/user-info/${user.id}`">
</MkA> <MkAvatar :user="user" class="avatar" :show-indicator="true" :disable-link="true"/>
</div> </MkA>
</div>
</transition>
</div> </div>
</template> </template>

78
packages/client/src/pages/admin/overview.stats.vue
View File

@ -1,46 +1,48 @@
<template> <template>
<div> <div>
<MkLoading v-if="fetching"/> <transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
<div v-else :class="$style.root"> <MkLoading v-if="fetching"/>
<div class="item _panel users"> <div v-else :class="$style.root">
<div class="icon"><i class="ti ti-users"></i></div> <div class="item _panel users">
<div class="body"> <div class="icon"><i class="ti ti-users"></i></div>
<div class="value"> <div class="body">
{{ number(stats.originalUsersCount) }} <div class="value">
<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="usersComparedToThePrevDay"></MkNumberDiff> {{ number(stats.originalUsersCount) }}
<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="usersComparedToThePrevDay"></MkNumberDiff>
</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>
<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>
<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>
<div class="label">Online</div>
</div> </div>
<div class="label">Users</div>
</div> </div>
</div> </div>
<div class="item _panel notes"> </transition>
<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>
<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>
<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>
</div>
</div> </div>
</template> </template>

14
packages/client/src/pages/admin/overview.users.vue
View File

@ -1,11 +1,13 @@
<template> <template>
<div :class="$style.root"> <div :class="$style.root">
<MkLoading v-if="fetching"/> <transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
<div v-else class="users"> <MkLoading v-if="fetching"/>
<MkA v-for="(user, i) in newUsers" :key="user.id" :to="`/user-info/${user.id}`" class="user"> <div v-else class="users">
<MkUserCardMini :user="user"/> <MkA v-for="(user, i) in newUsers" :key="user.id" :to="`/user-info/${user.id}`" class="user">
</MkA> <MkUserCardMini :user="user"/>
</div> </MkA>
</div>
</transition>
</div> </div>
</template> </template>