From 055dc6bb669234d3dc45845476ecb4fbd736734a Mon Sep 17 00:00:00 2001 From: syuilo Date: Fri, 12 May 2023 10:29:27 +0900 Subject: [PATCH] enhance(frontend): add retention line chart --- CHANGELOG.md | 1 + .../src/components/MkInstanceStats.vue | 13 +- .../src/components/MkRetentionHeatmap.vue | 4 + .../src/components/MkRetentionLineChart.vue | 130 ++++++++++++++++++ 4 files changed, 146 insertions(+), 2 deletions(-) create mode 100644 packages/frontend/src/components/MkRetentionLineChart.vue diff --git a/CHANGELOG.md b/CHANGELOG.md index c38cb12c3..eafed11ef 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -24,6 +24,7 @@ Meilisearchの設定に`index`が必要になりました。値はMisskeyサー ### Client - ユーザーを指定してのノート検索が可能に - アカウント初期設定ウィザードにプライバシー設定を追加 +- リテンション率チャートに折れ線グラフを追加 - Fix: ブラーエフェクトを有効にしている状態で高負荷になる問題を修正 - Fix: カラーバーがリプライには表示されないのを修正 - Fix: チャンネル内の検索ボックスが挙動不審な問題を修正 diff --git a/packages/frontend/src/components/MkInstanceStats.vue b/packages/frontend/src/components/MkInstanceStats.vue index 0f87fef6b..6fcd8f781 100644 --- a/packages/frontend/src/components/MkInstanceStats.vue +++ b/packages/frontend/src/components/MkInstanceStats.vue @@ -52,9 +52,12 @@ -
+
+
+ +
@@ -86,6 +89,7 @@ import { i18n } from '@/i18n'; import MkHeatmap from '@/components/MkHeatmap.vue'; import MkFoldableSection from '@/components/MkFoldableSection.vue'; import MkRetentionHeatmap from '@/components/MkRetentionHeatmap.vue'; +import MkRetentionLineChart from '@/components/MkRetentionLineChart.vue'; import { initChart } from '@/scripts/init-chart'; initChart(); @@ -202,7 +206,12 @@ onMounted(() => { margin-bottom: 16px; } -.retention { +.retentionHeatmap { + padding: 16px; + margin-bottom: 16px; +} + +.retentionLine { padding: 16px; margin-bottom: 16px; } diff --git a/packages/frontend/src/components/MkRetentionHeatmap.vue b/packages/frontend/src/components/MkRetentionHeatmap.vue index 3f5f09f5d..fc2bc5c87 100644 --- a/packages/frontend/src/components/MkRetentionHeatmap.vue +++ b/packages/frontend/src/components/MkRetentionHeatmap.vue @@ -129,6 +129,10 @@ async function renderChart() { autoSkip: false, callback: (value, index, values) => value, }, + title: { + display: true, + text: 'Days later', + }, }, y: { type: 'time', diff --git a/packages/frontend/src/components/MkRetentionLineChart.vue b/packages/frontend/src/components/MkRetentionLineChart.vue new file mode 100644 index 000000000..8bd027980 --- /dev/null +++ b/packages/frontend/src/components/MkRetentionLineChart.vue @@ -0,0 +1,130 @@ + + + + +