enhance(frontend): add retention line chart

This commit is contained in:
syuilo
2023-05-12 10:29:27 +09:00
parent f06339b970
commit 055dc6bb66
4 changed files with 146 additions and 2 deletions

View File

@@ -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;
}