From be0d3961069c628bbd59d76c314cff9fedaca829 Mon Sep 17 00:00:00 2001 From: syuilo Date: Mon, 26 Dec 2022 14:34:46 +0900 Subject: [PATCH] :art: --- .../src/pages/admin/overview.active-users.vue | 58 +++++++------- .../src/pages/admin/overview.ap-requests.vue | 40 ++++++---- .../src/pages/admin/overview.instances.vue | 14 ++-- .../src/pages/admin/overview.moderators.vue | 14 ++-- .../client/src/pages/admin/overview.stats.vue | 78 ++++++++++--------- .../client/src/pages/admin/overview.users.vue | 14 ++-- 6 files changed, 113 insertions(+), 105 deletions(-) diff --git a/packages/client/src/pages/admin/overview.active-users.vue b/packages/client/src/pages/admin/overview.active-users.vue index eb4cefb34..c3ce5ac90 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(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 e1179181c..024ffdc24 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(); const chartEl2 = $ref(); @@ -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 81ce2d280..29848bf03 100644 --- a/packages/client/src/pages/admin/overview.instances.vue +++ b/packages/client/src/pages/admin/overview.instances.vue @@ -1,11 +1,13 @@ diff --git a/packages/client/src/pages/admin/overview.moderators.vue b/packages/client/src/pages/admin/overview.moderators.vue index 971fb993d..a1f63c871 100644 --- a/packages/client/src/pages/admin/overview.moderators.vue +++ b/packages/client/src/pages/admin/overview.moderators.vue @@ -1,11 +1,13 @@ diff --git a/packages/client/src/pages/admin/overview.stats.vue b/packages/client/src/pages/admin/overview.stats.vue index 28c5401ab..4dcf7e751 100644 --- a/packages/client/src/pages/admin/overview.stats.vue +++ b/packages/client/src/pages/admin/overview.stats.vue @@ -1,46 +1,48 @@ diff --git a/packages/client/src/pages/admin/overview.users.vue b/packages/client/src/pages/admin/overview.users.vue index 9747bfc3b..5d4be1174 100644 --- a/packages/client/src/pages/admin/overview.users.vue +++ b/packages/client/src/pages/admin/overview.users.vue @@ -1,11 +1,13 @@