From 8539c7b20f915fdb235ff557499a6bf85c3ec526 Mon Sep 17 00:00:00 2001 From: syuilo Date: Sat, 24 Dec 2022 08:46:30 +0900 Subject: [PATCH] :art: --- packages/client/src/components/MkFolder.vue | 5 +- .../src/pages/admin/overview.ap-requests.vue | 157 +++++++++++++----- .../src/pages/admin/overview.federation.vue | 4 +- .../client/src/pages/admin/overview.stats.vue | 2 +- .../client/src/pages/admin/overview.users.vue | 2 +- .../client/src/scripts/use-chart-tooltip.ts | 2 +- 6 files changed, 126 insertions(+), 46 deletions(-) diff --git a/packages/client/src/components/MkFolder.vue b/packages/client/src/components/MkFolder.vue index ee3df8328..9e83b07cd 100644 --- a/packages/client/src/components/MkFolder.vue +++ b/packages/client/src/components/MkFolder.vue @@ -8,7 +8,8 @@ - .title { + display: grid; + place-content: center; margin: 0; padding: 12px 16px 12px 0; diff --git a/packages/client/src/pages/admin/overview.ap-requests.vue b/packages/client/src/pages/admin/overview.ap-requests.vue index 65ba0075e..e1179181c 100644 --- a/packages/client/src/pages/admin/overview.ap-requests.vue +++ b/packages/client/src/pages/admin/overview.ap-requests.vue @@ -2,8 +2,13 @@
-
- +
+
+ +
+
+ +
@@ -58,20 +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(); 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, @@ -244,6 +224,99 @@ 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; }); @@ -251,11 +324,15 @@ onMounted(async () => {