🎨
This commit is contained in:
syuilo
parent
e0d207a173
commit
be0d396106
6 changed files with 113 additions and 105 deletions
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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 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>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue