summaryrefslogtreecommitdiff
path: root/packages/frontend/src/components/MkInstanceStats.vue
diff options
context:
space:
mode:
authorsyuilo <Syuilotan@yahoo.co.jp>2023-05-12 10:29:27 +0900
committersyuilo <Syuilotan@yahoo.co.jp>2023-05-12 10:29:27 +0900
commit055dc6bb669234d3dc45845476ecb4fbd736734a (patch)
treecd0041d3f2878200ec9fb05478364de5812ad298 /packages/frontend/src/components/MkInstanceStats.vue
parent:art: (diff)
downloadsharkey-055dc6bb669234d3dc45845476ecb4fbd736734a.tar.gz
sharkey-055dc6bb669234d3dc45845476ecb4fbd736734a.tar.bz2
sharkey-055dc6bb669234d3dc45845476ecb4fbd736734a.zip
enhance(frontend): add retention line chart
Diffstat (limited to 'packages/frontend/src/components/MkInstanceStats.vue')
-rw-r--r--packages/frontend/src/components/MkInstanceStats.vue13
1 files changed, 11 insertions, 2 deletions
diff --git a/packages/frontend/src/components/MkInstanceStats.vue b/packages/frontend/src/components/MkInstanceStats.vue
index 0f87fef6b1..6fcd8f7811 100644
--- a/packages/frontend/src/components/MkInstanceStats.vue
+++ b/packages/frontend/src/components/MkInstanceStats.vue
@@ -52,9 +52,12 @@
<MkFoldableSection class="item">
<template #header>Retention rate</template>
- <div class="_panel" :class="$style.retention">
+ <div class="_panel" :class="$style.retentionHeatmap">
<MkRetentionHeatmap/>
</div>
+ <div class="_panel" :class="$style.retentionLine">
+ <MkRetentionLineChart/>
+ </div>
</MkFoldableSection>
<MkFoldableSection class="item">
@@ -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;
}