From f598a876eb4b8e832c9e6285a564ffde0d90b003 Mon Sep 17 00:00:00 2001 From: syuilo Date: Mon, 2 Jan 2023 19:58:51 +0900 Subject: [PATCH] refactor --- packages/frontend/src/components/MkChart.vue | 9 --------- packages/frontend/src/components/MkHeatmap.vue | 10 ---------- .../frontend/src/components/MkRetentionHeatmap.vue | 10 ---------- .../src/pages/admin/overview.active-users.vue | 9 --------- .../src/pages/admin/overview.ap-requests.vue | 14 -------------- packages/frontend/src/pages/admin/overview.pie.vue | 3 --- .../src/pages/admin/overview.queue.chart.vue | 9 --------- .../frontend/src/pages/admin/queue.chart.chart.vue | 9 --------- .../frontend/src/pages/user/activity.heatmap.vue | 10 ---------- packages/frontend/src/pages/user/activity.pv.vue | 9 --------- packages/frontend/src/scripts/init-chart.ts | 8 ++++++++ 11 files changed, 8 insertions(+), 92 deletions(-) diff --git a/packages/frontend/src/components/MkChart.vue b/packages/frontend/src/components/MkChart.vue index 9ca7deaf8..d60284965 100644 --- a/packages/frontend/src/components/MkChart.vue +++ b/packages/frontend/src/components/MkChart.vue @@ -128,12 +128,8 @@ const render = () => { chartInstance.destroy(); } - 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)'; - // フォントカラー - Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg'); - const maxes = chartData.series.map((x, i) => Math.max(...x.data.map(d => d.y))); chartInstance = new Chart(chartEl.value, { @@ -188,8 +184,6 @@ const render = () => { unit: props.span === 'day' ? 'month' : 'day', }, grid: { - color: gridColor, - borderColor: 'rgb(0, 0, 0, 0)', }, ticks: { display: props.detailed, @@ -208,8 +202,6 @@ const render = () => { stacked: props.stacked, suggestedMax: 50, grid: { - color: gridColor, - borderColor: 'rgb(0, 0, 0, 0)', }, ticks: { display: props.detailed, @@ -227,7 +219,6 @@ const render = () => { hoverBorderWidth: 2, }, }, - animation: false, plugins: { legend: { display: props.detailed, diff --git a/packages/frontend/src/components/MkHeatmap.vue b/packages/frontend/src/components/MkHeatmap.vue index 5350928bf..f7a2db850 100644 --- a/packages/frontend/src/components/MkHeatmap.vue +++ b/packages/frontend/src/components/MkHeatmap.vue @@ -92,11 +92,6 @@ async function renderChart() { await nextTick(); - const gridColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'; - - // フォントカラー - Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg'); - const color = defaultStore.state.darkMode ? '#b4e900' : '#86b300'; // 視覚上の分かりやすさのため上から最も大きい3つの値の平均を最大値とする @@ -160,8 +155,6 @@ async function renderChart() { }, grid: { display: false, - color: gridColor, - borderColor: 'rgb(0, 0, 0, 0)', }, ticks: { display: true, @@ -175,8 +168,6 @@ async function renderChart() { position: 'right', grid: { display: false, - color: gridColor, - borderColor: 'rgb(0, 0, 0, 0)', }, ticks: { maxRotation: 0, @@ -189,7 +180,6 @@ async function renderChart() { }, }, }, - animation: false, plugins: { legend: { display: false, diff --git a/packages/frontend/src/components/MkRetentionHeatmap.vue b/packages/frontend/src/components/MkRetentionHeatmap.vue index b42c4f29a..4dcf0cef9 100644 --- a/packages/frontend/src/components/MkRetentionHeatmap.vue +++ b/packages/frontend/src/components/MkRetentionHeatmap.vue @@ -64,11 +64,6 @@ async function renderChart() { await nextTick(); - const gridColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'; - - // フォントカラー - Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg'); - const color = defaultStore.state.darkMode ? '#b4e900' : '#86b300'; // 視覚上の分かりやすさのため上から最も大きい3つの値の平均を最大値とする @@ -119,8 +114,6 @@ async function renderChart() { suggestedMax: maxDays, grid: { display: false, - color: gridColor, - borderColor: 'rgb(0, 0, 0, 0)', }, ticks: { display: true, @@ -143,8 +136,6 @@ async function renderChart() { }, grid: { display: false, - color: gridColor, - borderColor: 'rgb(0, 0, 0, 0)', }, ticks: { maxRotation: 0, @@ -156,7 +147,6 @@ async function renderChart() { }, }, }, - animation: false, plugins: { legend: { display: false, diff --git a/packages/frontend/src/pages/admin/overview.active-users.vue b/packages/frontend/src/pages/admin/overview.active-users.vue index 190635c75..d760d90ef 100644 --- a/packages/frontend/src/pages/admin/overview.active-users.vue +++ b/packages/frontend/src/pages/admin/overview.active-users.vue @@ -53,12 +53,8 @@ async function renderChart() { const raw = await os.api('charts/active-users', { limit: chartLimit, span: 'day' }); - 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)'; - // フォントカラー - Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg'); - const colorRead = '#3498db'; const colorWrite = '#2ecc71'; @@ -113,8 +109,6 @@ async function renderChart() { }, grid: { display: false, - color: gridColor, - borderColor: 'rgb(0, 0, 0, 0)', }, ticks: { display: true, @@ -132,8 +126,6 @@ async function renderChart() { suggestedMax: 10, grid: { display: true, - color: gridColor, - borderColor: 'rgb(0, 0, 0, 0)', }, ticks: { display: true, @@ -145,7 +137,6 @@ async function renderChart() { intersect: false, mode: 'index', }, - animation: false, plugins: { legend: { display: false, diff --git a/packages/frontend/src/pages/admin/overview.ap-requests.vue b/packages/frontend/src/pages/admin/overview.ap-requests.vue index fa6a6f30d..5dcb67474 100644 --- a/packages/frontend/src/pages/admin/overview.ap-requests.vue +++ b/packages/frontend/src/pages/admin/overview.ap-requests.vue @@ -68,7 +68,6 @@ onMounted(async () => { const raw = await os.api('charts/ap-request', { limit: chartLimit, span: 'day' }); - 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 = '#87e000'; const failColor = '#ff4400'; @@ -76,9 +75,6 @@ onMounted(async () => { const succMax = Math.max(...raw.deliverSucceeded); const failMax = Math.max(...raw.deliverFailed); - // フォントカラー - Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg'); - new Chart(chartEl, { type: 'line', data: { @@ -133,8 +129,6 @@ onMounted(async () => { }, grid: { display: true, - color: gridColor, - borderColor: 'rgb(0, 0, 0, 0)', }, ticks: { display: true, @@ -154,8 +148,6 @@ onMounted(async () => { suggestedMax: 10, grid: { display: true, - color: gridColor, - borderColor: 'rgb(0, 0, 0, 0)', }, ticks: { display: true, @@ -174,7 +166,6 @@ onMounted(async () => { hoverBorderWidth: 2, }, }, - animation: false, plugins: { legend: { display: false, @@ -232,8 +223,6 @@ onMounted(async () => { }, grid: { display: false, - color: gridColor, - borderColor: 'rgb(0, 0, 0, 0)', }, ticks: { display: false, @@ -252,8 +241,6 @@ onMounted(async () => { suggestedMax: 10, grid: { display: true, - color: gridColor, - borderColor: 'rgb(0, 0, 0, 0)', }, }, }, @@ -267,7 +254,6 @@ onMounted(async () => { hoverBorderWidth: 2, }, }, - animation: false, plugins: { legend: { display: false, diff --git a/packages/frontend/src/pages/admin/overview.pie.vue b/packages/frontend/src/pages/admin/overview.pie.vue index 33ab6fe85..b6f0d1b70 100644 --- a/packages/frontend/src/pages/admin/overview.pie.vue +++ b/packages/frontend/src/pages/admin/overview.pie.vue @@ -18,9 +18,6 @@ const props = defineProps<{ const chartEl = ref(null); -// フォントカラー -Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg'); - const { handler: externalTooltipHandler } = useChartTooltip({ position: 'middle', }); diff --git a/packages/frontend/src/pages/admin/overview.queue.chart.vue b/packages/frontend/src/pages/admin/overview.queue.chart.vue index bb51ffd68..1765577d4 100644 --- a/packages/frontend/src/pages/admin/overview.queue.chart.vue +++ b/packages/frontend/src/pages/admin/overview.queue.chart.vue @@ -21,11 +21,6 @@ const props = defineProps<{ const chartEl = ref(null); -const gridColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'; - -// フォントカラー -Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg'); - const { handler: externalTooltipHandler } = useChartTooltip(); let chartInstance: Chart; @@ -101,8 +96,6 @@ onMounted(() => { x: { grid: { display: false, - color: gridColor, - borderColor: 'rgb(0, 0, 0, 0)', }, ticks: { display: false, @@ -112,8 +105,6 @@ onMounted(() => { y: { min: 0, grid: { - color: gridColor, - borderColor: 'rgb(0, 0, 0, 0)', }, }, }, diff --git a/packages/frontend/src/pages/admin/queue.chart.chart.vue b/packages/frontend/src/pages/admin/queue.chart.chart.vue index f95cd1c87..ae8d9ae4d 100644 --- a/packages/frontend/src/pages/admin/queue.chart.chart.vue +++ b/packages/frontend/src/pages/admin/queue.chart.chart.vue @@ -21,11 +21,6 @@ const props = defineProps<{ const chartEl = ref(null); -const gridColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'; - -// フォントカラー -Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg'); - const { handler: externalTooltipHandler } = useChartTooltip(); let chartInstance: Chart; @@ -101,8 +96,6 @@ onMounted(() => { x: { grid: { display: true, - color: gridColor, - borderColor: 'rgb(0, 0, 0, 0)', }, ticks: { display: false, @@ -112,8 +105,6 @@ onMounted(() => { y: { min: 0, grid: { - color: gridColor, - borderColor: 'rgb(0, 0, 0, 0)', }, }, }, diff --git a/packages/frontend/src/pages/user/activity.heatmap.vue b/packages/frontend/src/pages/user/activity.heatmap.vue index 86e3a0f4f..000653ea5 100644 --- a/packages/frontend/src/pages/user/activity.heatmap.vue +++ b/packages/frontend/src/pages/user/activity.heatmap.vue @@ -81,11 +81,6 @@ async function renderChart() { await nextTick(); - const gridColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'; - - // フォントカラー - Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg'); - const color = defaultStore.state.darkMode ? '#b4e900' : '#86b300'; // 視覚上の分かりやすさのため上から最も大きい3つの値の平均を最大値とする @@ -149,8 +144,6 @@ async function renderChart() { }, grid: { display: false, - color: gridColor, - borderColor: 'rgb(0, 0, 0, 0)', }, ticks: { display: true, @@ -164,8 +157,6 @@ async function renderChart() { position: 'right', grid: { display: false, - color: gridColor, - borderColor: 'rgb(0, 0, 0, 0)', }, ticks: { maxRotation: 0, @@ -178,7 +169,6 @@ async function renderChart() { }, }, }, - animation: false, plugins: { legend: { display: false, diff --git a/packages/frontend/src/pages/user/activity.pv.vue b/packages/frontend/src/pages/user/activity.pv.vue index d709bc01b..25d708e71 100644 --- a/packages/frontend/src/pages/user/activity.pv.vue +++ b/packages/frontend/src/pages/user/activity.pv.vue @@ -58,12 +58,8 @@ async function renderChart() { const raw = await os.api('charts/user/pv', { userId: props.user.id, limit: chartLimit, span: 'day' }); - 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)'; - // フォントカラー - Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg'); - const colorUser = '#3498db'; const colorVisitor = '#2ecc71'; @@ -117,8 +113,6 @@ async function renderChart() { }, grid: { display: false, - color: gridColor, - borderColor: 'rgb(0, 0, 0, 0)', }, ticks: { display: true, @@ -137,8 +131,6 @@ async function renderChart() { suggestedMax: 10, grid: { display: true, - color: gridColor, - borderColor: 'rgb(0, 0, 0, 0)', }, ticks: { display: true, @@ -150,7 +142,6 @@ async function renderChart() { intersect: false, mode: 'index', }, - animation: false, plugins: { title: { display: true, diff --git a/packages/frontend/src/scripts/init-chart.ts b/packages/frontend/src/scripts/init-chart.ts index 32f887f2e..005ac5e27 100644 --- a/packages/frontend/src/scripts/init-chart.ts +++ b/packages/frontend/src/scripts/init-chart.ts @@ -19,6 +19,7 @@ import { import gradient from 'chartjs-plugin-gradient'; import zoomPlugin from 'chartjs-plugin-zoom'; import { MatrixController, MatrixElement } from 'chartjs-chart-matrix'; +import { defaultStore } from '@/store'; export function initChart() { Chart.register( @@ -41,4 +42,11 @@ export function initChart() { zoomPlugin, gradient, ); + + // フォントカラー + Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg'); + + Chart.defaults.borderColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'; + + Chart.defaults.animation = false; }