From 2547c8c11799ee9bc997185d4472b7403986d6d7 Mon Sep 17 00:00:00 2001 From: syuilo <Syuilotan@yahoo.co.jp> Date: Wed, 28 Dec 2022 13:42:30 +0900 Subject: [PATCH] refactor --- .../src/components/MkActiveUsersHeatmap.vue | 9 +-- packages/frontend/src/pages/admin/metrics.vue | 67 +++++++++---------- .../src/pages/admin/overview.active-users.vue | 9 +-- .../src/pages/admin/overview.ap-requests.vue | 9 +-- .../src/pages/admin/overview.queue.chart.vue | 9 +-- .../src/pages/admin/queue.chart.chart.vue | 9 +-- packages/frontend/src/scripts/color.ts | 7 ++ 7 files changed, 42 insertions(+), 77 deletions(-) create mode 100644 packages/frontend/src/scripts/color.ts diff --git a/packages/frontend/src/components/MkActiveUsersHeatmap.vue b/packages/frontend/src/components/MkActiveUsersHeatmap.vue index 9204c7312a..6b89a012f2 100644 --- a/packages/frontend/src/components/MkActiveUsersHeatmap.vue +++ b/packages/frontend/src/components/MkActiveUsersHeatmap.vue @@ -34,6 +34,7 @@ import { defaultStore } from '@/store'; import { useChartTooltip } from '@/scripts/use-chart-tooltip'; import { MatrixController, MatrixElement } from 'chartjs-chart-matrix'; import { chartVLine } from '@/scripts/chart-vline'; +import { alpha } from '@/scripts/color'; Chart.register( ArcElement, @@ -53,14 +54,6 @@ Chart.register( MatrixController, MatrixElement, ); -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 rootEl = $ref<HTMLDivElement>(null); const chartEl = $ref<HTMLCanvasElement>(null); const now = new Date(); diff --git a/packages/frontend/src/pages/admin/metrics.vue b/packages/frontend/src/pages/admin/metrics.vue index db8e448639..6c4803fe0b 100644 --- a/packages/frontend/src/pages/admin/metrics.vue +++ b/packages/frontend/src/pages/admin/metrics.vue @@ -53,54 +53,47 @@ <script lang="ts"> import { defineComponent, markRaw } from 'vue'; import { - Chart, - ArcElement, - LineElement, - BarElement, - PointElement, - BarController, - LineController, - CategoryScale, - LinearScale, - Legend, - Title, - Tooltip, - SubTitle, + Chart, + ArcElement, + LineElement, + BarElement, + PointElement, + BarController, + LineController, + CategoryScale, + LinearScale, + Legend, + Title, + Tooltip, + SubTitle, } from 'chart.js'; +import MkwFederation from '../../widgets/federation.vue'; import MkButton from '@/components/MkButton.vue'; import MkSelect from '@/components/form/select.vue'; import MkInput from '@/components/form/input.vue'; import MkContainer from '@/components/MkContainer.vue'; import MkFolder from '@/components/MkFolder.vue'; -import MkwFederation from '../../widgets/federation.vue'; import { version, url } from '@/config'; import bytes from '@/filters/bytes'; import number from '@/filters/number'; - -Chart.register( - ArcElement, - LineElement, - BarElement, - PointElement, - BarController, - LineController, - CategoryScale, - LinearScale, - Legend, - Title, - Tooltip, - SubTitle, -); - -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})`; -}; import * as os from '@/os'; import { stream } from '@/stream'; +import { alpha } from '@/scripts/color'; + +Chart.register( + ArcElement, + LineElement, + BarElement, + PointElement, + BarController, + LineController, + CategoryScale, + LinearScale, + Legend, + Title, + Tooltip, + SubTitle, +); export default defineComponent({ components: { diff --git a/packages/frontend/src/pages/admin/overview.active-users.vue b/packages/frontend/src/pages/admin/overview.active-users.vue index c3ce5ac901..ea8c74f3a2 100644 --- a/packages/frontend/src/pages/admin/overview.active-users.vue +++ b/packages/frontend/src/pages/admin/overview.active-users.vue @@ -34,6 +34,7 @@ import { defaultStore } from '@/store'; import { useChartTooltip } from '@/scripts/use-chart-tooltip'; import gradient from 'chartjs-plugin-gradient'; import { chartVLine } from '@/scripts/chart-vline'; +import { alpha } from '@/scripts/color'; Chart.register( ArcElement, @@ -53,14 +54,6 @@ 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 chartEl = $ref<HTMLCanvasElement>(null); const now = new Date(); let chartInstance: Chart = null; diff --git a/packages/frontend/src/pages/admin/overview.ap-requests.vue b/packages/frontend/src/pages/admin/overview.ap-requests.vue index 024ffdc245..d15507564d 100644 --- a/packages/frontend/src/pages/admin/overview.ap-requests.vue +++ b/packages/frontend/src/pages/admin/overview.ap-requests.vue @@ -44,6 +44,7 @@ import { i18n } from '@/i18n'; import { useChartTooltip } from '@/scripts/use-chart-tooltip'; import { chartVLine } from '@/scripts/chart-vline'; import { defaultStore } from '@/store'; +import { alpha } from '@/scripts/color'; Chart.register( ArcElement, @@ -63,14 +64,6 @@ 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>(); diff --git a/packages/frontend/src/pages/admin/overview.queue.chart.vue b/packages/frontend/src/pages/admin/overview.queue.chart.vue index 1e095bddaa..2552e0a6c3 100644 --- a/packages/frontend/src/pages/admin/overview.queue.chart.vue +++ b/packages/frontend/src/pages/admin/overview.queue.chart.vue @@ -26,6 +26,7 @@ import * as os from '@/os'; import { defaultStore } from '@/store'; import { useChartTooltip } from '@/scripts/use-chart-tooltip'; import { chartVLine } from '@/scripts/chart-vline'; +import { alpha } from '@/scripts/color'; Chart.register( ArcElement, @@ -48,14 +49,6 @@ const props = defineProps<{ type: string; }>(); -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 chartEl = ref<HTMLCanvasElement>(null); const gridColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'; diff --git a/packages/frontend/src/pages/admin/queue.chart.chart.vue b/packages/frontend/src/pages/admin/queue.chart.chart.vue index 5777674ae3..b91689589d 100644 --- a/packages/frontend/src/pages/admin/queue.chart.chart.vue +++ b/packages/frontend/src/pages/admin/queue.chart.chart.vue @@ -26,6 +26,7 @@ import * as os from '@/os'; import { defaultStore } from '@/store'; import { useChartTooltip } from '@/scripts/use-chart-tooltip'; import { chartVLine } from '@/scripts/chart-vline'; +import { alpha } from '@/scripts/color'; Chart.register( ArcElement, @@ -48,14 +49,6 @@ const props = defineProps<{ type: string; }>(); -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 chartEl = ref<HTMLCanvasElement>(null); const gridColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'; diff --git a/packages/frontend/src/scripts/color.ts b/packages/frontend/src/scripts/color.ts new file mode 100644 index 0000000000..10a99a5a05 --- /dev/null +++ b/packages/frontend/src/scripts/color.ts @@ -0,0 +1,7 @@ +export const alpha = (hex: string, a: number): string => { + 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})`; +};