From e36e5df635d59dbd238eaa63c787f0ff8c864827 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 6 Jan 2023 20:00:06 +0900
Subject: [PATCH] chore(client): tweak charts

---
 packages/frontend/src/components/MkChart.vue           | 10 ++++------
 packages/frontend/src/components/MkHeatmap.vue         |  5 +++--
 .../frontend/src/components/MkRetentionHeatmap.vue     |  1 -
 .../frontend/src/pages/admin/overview.active-users.vue |  6 ------
 .../frontend/src/pages/admin/overview.ap-requests.vue  |  6 ------
 packages/frontend/src/pages/user/activity.heatmap.vue  |  5 +++--
 packages/frontend/src/pages/user/activity.pv.vue       | 10 ++++------
 7 files changed, 14 insertions(+), 29 deletions(-)

diff --git a/packages/frontend/src/components/MkChart.vue b/packages/frontend/src/components/MkChart.vue
index ea28cfa79..57efda44b 100644
--- a/packages/frontend/src/components/MkChart.vue
+++ b/packages/frontend/src/components/MkChart.vue
@@ -16,7 +16,6 @@
 */
 import { onMounted, ref, shallowRef, watch, PropType, onUnmounted } from 'vue';
 import { Chart } from 'chart.js';
-import { enUS } from 'date-fns/locale';
 import gradient from 'chartjs-plugin-gradient';
 import * as os from '@/os';
 import { defaultStore } from '@/store';
@@ -186,6 +185,10 @@ const render = () => {
 					time: {
 						stepSize: 1,
 						unit: props.span === 'day' ? 'month' : 'day',
+						displayFormats: {
+							day: 'M/d',
+							month: 'Y/M',
+						},
 					},
 					grid: {
 					},
@@ -194,11 +197,6 @@ const render = () => {
 						maxRotation: 0,
 						autoSkipPadding: 16,
 					},
-					adapters: {
-						date: {
-							locale: enUS,
-						},
-					},
 					min: getDate(props.limit).getTime(),
 				},
 				y: {
diff --git a/packages/frontend/src/components/MkHeatmap.vue b/packages/frontend/src/components/MkHeatmap.vue
index ec7f49bee..f222fca9a 100644
--- a/packages/frontend/src/components/MkHeatmap.vue
+++ b/packages/frontend/src/components/MkHeatmap.vue
@@ -10,7 +10,6 @@
 <script lang="ts" setup>
 import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
 import { Chart } from 'chart.js';
-import { enUS } from 'date-fns/locale';
 import tinycolor from 'tinycolor2';
 import { MatrixController, MatrixElement } from 'chartjs-chart-matrix';
 import * as os from '@/os';
@@ -149,7 +148,9 @@ async function renderChart() {
 						round: 'week',
 						isoWeekday: 0,
 						displayFormats: {
-							week: 'MMM dd',
+							day: 'M/d',
+							month: 'Y/M',
+							week: 'M/d',
 						},
 					},
 					grid: {
diff --git a/packages/frontend/src/components/MkRetentionHeatmap.vue b/packages/frontend/src/components/MkRetentionHeatmap.vue
index e91b58a4a..b5b1d5f10 100644
--- a/packages/frontend/src/components/MkRetentionHeatmap.vue
+++ b/packages/frontend/src/components/MkRetentionHeatmap.vue
@@ -10,7 +10,6 @@
 <script lang="ts" setup>
 import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick } from 'vue';
 import { Chart } from 'chart.js';
-import { enUS } from 'date-fns/locale';
 import tinycolor from 'tinycolor2';
 import { MatrixController, MatrixElement } from 'chartjs-chart-matrix';
 import * as os from '@/os';
diff --git a/packages/frontend/src/pages/admin/overview.active-users.vue b/packages/frontend/src/pages/admin/overview.active-users.vue
index 14b09f34e..e20b8221c 100644
--- a/packages/frontend/src/pages/admin/overview.active-users.vue
+++ b/packages/frontend/src/pages/admin/overview.active-users.vue
@@ -10,7 +10,6 @@
 <script lang="ts" setup>
 import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick } from 'vue';
 import { Chart } from 'chart.js';
-import { enUS } from 'date-fns/locale';
 import tinycolor from 'tinycolor2';
 import gradient from 'chartjs-plugin-gradient';
 import * as os from '@/os';
@@ -114,11 +113,6 @@ async function renderChart() {
 						maxRotation: 0,
 						autoSkipPadding: 8,
 					},
-					adapters: {
-						date: {
-							locale: enUS,
-						},
-					},
 				},
 				y: {
 					position: 'left',
diff --git a/packages/frontend/src/pages/admin/overview.ap-requests.vue b/packages/frontend/src/pages/admin/overview.ap-requests.vue
index 61a066708..9bc08ef6b 100644
--- a/packages/frontend/src/pages/admin/overview.ap-requests.vue
+++ b/packages/frontend/src/pages/admin/overview.ap-requests.vue
@@ -18,7 +18,6 @@
 import { onMounted, onUnmounted, ref } from 'vue';
 import { Chart } from 'chart.js';
 import gradient from 'chartjs-plugin-gradient';
-import { enUS } from 'date-fns/locale';
 import tinycolor from 'tinycolor2';
 import MkMiniChart from '@/components/MkMiniChart.vue';
 import * as os from '@/os';
@@ -135,11 +134,6 @@ onMounted(async () => {
 						maxRotation: 0,
 						autoSkipPadding: 16,
 					},
-					adapters: {
-						date: {
-							locale: enUS,
-						},
-					},
 					min: getDate(chartLimit).getTime(),
 				},
 				y: {
diff --git a/packages/frontend/src/pages/user/activity.heatmap.vue b/packages/frontend/src/pages/user/activity.heatmap.vue
index 252985d11..7b4c92c02 100644
--- a/packages/frontend/src/pages/user/activity.heatmap.vue
+++ b/packages/frontend/src/pages/user/activity.heatmap.vue
@@ -10,7 +10,6 @@
 <script lang="ts" setup>
 import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
 import { Chart } from 'chart.js';
-import { enUS } from 'date-fns/locale';
 import tinycolor from 'tinycolor2';
 import * as misskey from 'misskey-js';
 import * as os from '@/os';
@@ -138,7 +137,9 @@ async function renderChart() {
 						round: 'week',
 						isoWeekday: 0,
 						displayFormats: {
-							week: 'MMM dd',
+							day: 'M/d',
+							month: 'Y/M',
+							week: 'M/d',
 						},
 					},
 					grid: {
diff --git a/packages/frontend/src/pages/user/activity.pv.vue b/packages/frontend/src/pages/user/activity.pv.vue
index 7715b6667..1f355cbcb 100644
--- a/packages/frontend/src/pages/user/activity.pv.vue
+++ b/packages/frontend/src/pages/user/activity.pv.vue
@@ -11,7 +11,6 @@
 <script lang="ts" setup>
 import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick } from 'vue';
 import { Chart } from 'chart.js';
-import { enUS } from 'date-fns/locale';
 import tinycolor from 'tinycolor2';
 import * as misskey from 'misskey-js';
 import gradient from 'chartjs-plugin-gradient';
@@ -113,6 +112,10 @@ async function renderChart() {
 					time: {
 						stepSize: 1,
 						unit: 'day',
+						displayFormats: {
+							day: 'M/d',
+							month: 'Y/M',
+						},
 					},
 					grid: {
 						display: false,
@@ -122,11 +125,6 @@ async function renderChart() {
 						maxRotation: 0,
 						autoSkipPadding: 8,
 					},
-					adapters: {
-						date: {
-							locale: enUS,
-						},
-					},
 				},
 				y: {
 					position: 'left',