From 7a953392964f883c3b4c92cab165557f091090d6 Mon Sep 17 00:00:00 2001 From: syuilo Date: Mon, 2 Jan 2023 10:18:47 +0900 Subject: enhance(client): user activity page --- packages/frontend/src/scripts/init-chart.ts | 44 +++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 packages/frontend/src/scripts/init-chart.ts (limited to 'packages/frontend/src/scripts/init-chart.ts') diff --git a/packages/frontend/src/scripts/init-chart.ts b/packages/frontend/src/scripts/init-chart.ts new file mode 100644 index 0000000000..32f887f2e7 --- /dev/null +++ b/packages/frontend/src/scripts/init-chart.ts @@ -0,0 +1,44 @@ +import { + Chart, + ArcElement, + LineElement, + BarElement, + PointElement, + BarController, + LineController, + DoughnutController, + CategoryScale, + LinearScale, + TimeScale, + Legend, + Title, + Tooltip, + SubTitle, + Filler, +} from 'chart.js'; +import gradient from 'chartjs-plugin-gradient'; +import zoomPlugin from 'chartjs-plugin-zoom'; +import { MatrixController, MatrixElement } from 'chartjs-chart-matrix'; + +export function initChart() { + Chart.register( + ArcElement, + LineElement, + BarElement, + PointElement, + BarController, + LineController, + DoughnutController, + CategoryScale, + LinearScale, + TimeScale, + Legend, + Title, + Tooltip, + SubTitle, + Filler, + MatrixController, MatrixElement, + zoomPlugin, + gradient, + ); +} -- cgit v1.2.3-freya From f598a876eb4b8e832c9e6285a564ffde0d90b003 Mon Sep 17 00:00:00 2001 From: syuilo Date: Mon, 2 Jan 2023 19:58:51 +0900 Subject: refactor --- packages/frontend/src/components/MkChart.vue | 9 --------- packages/frontend/src/components/MkHeatmap.vue | 10 ---------- packages/frontend/src/components/MkRetentionHeatmap.vue | 10 ---------- .../frontend/src/pages/admin/overview.active-users.vue | 9 --------- packages/frontend/src/pages/admin/overview.ap-requests.vue | 14 -------------- packages/frontend/src/pages/admin/overview.pie.vue | 3 --- packages/frontend/src/pages/admin/overview.queue.chart.vue | 9 --------- packages/frontend/src/pages/admin/queue.chart.chart.vue | 9 --------- packages/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(-) (limited to 'packages/frontend/src/scripts/init-chart.ts') diff --git a/packages/frontend/src/components/MkChart.vue b/packages/frontend/src/components/MkChart.vue index 9ca7deaf80..d602849651 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 5350928bfe..f7a2db8509 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 b42c4f29a5..4dcf0cef9c 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 190635c754..d760d90ef1 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 fa6a6f30d3..5dcb67474f 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 33ab6fe851..b6f0d1b705 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 bb51ffd68f..1765577d45 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 f95cd1c872..ae8d9ae4de 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 86e3a0f4f9..000653ea5c 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 d709bc01b9..25d708e71a 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 32f887f2e7..005ac5e271 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; } -- cgit v1.2.3-freya From 826e4502cb45441614e4881fab9307f85f4fd069 Mon Sep 17 00:00:00 2001 From: syuilo Date: Tue, 3 Jan 2023 13:09:24 +0900 Subject: refactor --- packages/frontend/src/components/MkChart.vue | 1 - packages/frontend/src/components/MkHeatmap.vue | 3 +-- packages/frontend/src/components/MkRetentionHeatmap.vue | 3 +-- packages/frontend/src/pages/admin/overview.active-users.vue | 3 +-- packages/frontend/src/pages/admin/overview.vue | 1 - packages/frontend/src/pages/user/activity.heatmap.vue | 1 - packages/frontend/src/pages/user/activity.pv.vue | 3 +-- packages/frontend/src/scripts/init-chart.ts | 1 + 8 files changed, 5 insertions(+), 11 deletions(-) (limited to 'packages/frontend/src/scripts/init-chart.ts') diff --git a/packages/frontend/src/components/MkChart.vue b/packages/frontend/src/components/MkChart.vue index 7d3a3d289b..c0562f02e3 100644 --- a/packages/frontend/src/components/MkChart.vue +++ b/packages/frontend/src/components/MkChart.vue @@ -15,7 +15,6 @@ */ import { onMounted, ref, shallowRef, watch, PropType, onUnmounted } from 'vue'; import { Chart } from 'chart.js'; -import 'chartjs-adapter-date-fns'; import { enUS } from 'date-fns/locale'; import gradient from 'chartjs-plugin-gradient'; import * as os from '@/os'; diff --git a/packages/frontend/src/components/MkHeatmap.vue b/packages/frontend/src/components/MkHeatmap.vue index fff93ef965..ec7f49beee 100644 --- a/packages/frontend/src/components/MkHeatmap.vue +++ b/packages/frontend/src/components/MkHeatmap.vue @@ -12,11 +12,10 @@ import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick, w 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'; -import 'chartjs-adapter-date-fns'; 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'; import { initChart } from '@/scripts/init-chart'; diff --git a/packages/frontend/src/components/MkRetentionHeatmap.vue b/packages/frontend/src/components/MkRetentionHeatmap.vue index 95690bde47..e91b58a4a8 100644 --- a/packages/frontend/src/components/MkRetentionHeatmap.vue +++ b/packages/frontend/src/components/MkRetentionHeatmap.vue @@ -12,11 +12,10 @@ import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick } 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'; -import 'chartjs-adapter-date-fns'; 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'; import { initChart } from '@/scripts/init-chart'; diff --git a/packages/frontend/src/pages/admin/overview.active-users.vue b/packages/frontend/src/pages/admin/overview.active-users.vue index e01009b7aa..14b09f34e9 100644 --- a/packages/frontend/src/pages/admin/overview.active-users.vue +++ b/packages/frontend/src/pages/admin/overview.active-users.vue @@ -12,11 +12,10 @@ import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick } 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'; -import 'chartjs-adapter-date-fns'; 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'; import { initChart } from '@/scripts/init-chart'; diff --git a/packages/frontend/src/pages/admin/overview.vue b/packages/frontend/src/pages/admin/overview.vue index c16a928a80..2e0b49c5a3 100644 --- a/packages/frontend/src/pages/admin/overview.vue +++ b/packages/frontend/src/pages/admin/overview.vue @@ -77,7 +77,6 @@ import * as os from '@/os'; import { stream } from '@/stream'; import { i18n } from '@/i18n'; import { definePageMetadata } from '@/scripts/page-metadata'; -import 'chartjs-adapter-date-fns'; import { defaultStore } from '@/store'; import MkFileListForAdmin from '@/components/MkFileListForAdmin.vue'; import MkFolder from '@/components/MkFolder.vue'; diff --git a/packages/frontend/src/pages/user/activity.heatmap.vue b/packages/frontend/src/pages/user/activity.heatmap.vue index 8472f79948..252985d113 100644 --- a/packages/frontend/src/pages/user/activity.heatmap.vue +++ b/packages/frontend/src/pages/user/activity.heatmap.vue @@ -14,7 +14,6 @@ import { enUS } from 'date-fns/locale'; import tinycolor from 'tinycolor2'; import * as misskey from 'misskey-js'; import * as os from '@/os'; -import 'chartjs-adapter-date-fns'; import { defaultStore } from '@/store'; import { useChartTooltip } from '@/scripts/use-chart-tooltip'; import { chartVLine } from '@/scripts/chart-vline'; diff --git a/packages/frontend/src/pages/user/activity.pv.vue b/packages/frontend/src/pages/user/activity.pv.vue index eaaeba976c..2d83d1ddc3 100644 --- a/packages/frontend/src/pages/user/activity.pv.vue +++ b/packages/frontend/src/pages/user/activity.pv.vue @@ -13,11 +13,10 @@ 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'; import * as os from '@/os'; -import 'chartjs-adapter-date-fns'; 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'; import { initChart } from '@/scripts/init-chart'; diff --git a/packages/frontend/src/scripts/init-chart.ts b/packages/frontend/src/scripts/init-chart.ts index 005ac5e271..fc18869009 100644 --- a/packages/frontend/src/scripts/init-chart.ts +++ b/packages/frontend/src/scripts/init-chart.ts @@ -20,6 +20,7 @@ import gradient from 'chartjs-plugin-gradient'; import zoomPlugin from 'chartjs-plugin-zoom'; import { MatrixController, MatrixElement } from 'chartjs-chart-matrix'; import { defaultStore } from '@/store'; +import 'chartjs-adapter-date-fns'; export function initChart() { Chart.register( -- cgit v1.2.3-freya