enhance(frontend): add retention line chart
This commit is contained in:
parent
f06339b970
commit
055dc6bb66
|
@ -24,6 +24,7 @@ Meilisearchの設定に`index`が必要になりました。値はMisskeyサー
|
|||
### Client
|
||||
- ユーザーを指定してのノート検索が可能に
|
||||
- アカウント初期設定ウィザードにプライバシー設定を追加
|
||||
- リテンション率チャートに折れ線グラフを追加
|
||||
- Fix: ブラーエフェクトを有効にしている状態で高負荷になる問題を修正
|
||||
- Fix: カラーバーがリプライには表示されないのを修正
|
||||
- Fix: チャンネル内の検索ボックスが挙動不審な問題を修正
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -129,6 +129,10 @@ async function renderChart() {
|
|||
autoSkip: false,
|
||||
callback: (value, index, values) => value,
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Days later',
|
||||
},
|
||||
},
|
||||
y: {
|
||||
type: 'time',
|
||||
|
|
|
@ -0,0 +1,130 @@
|
|||
<template>
|
||||
<canvas ref="chartEl"></canvas>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, shallowRef } from 'vue';
|
||||
import { Chart } from 'chart.js';
|
||||
import tinycolor from 'tinycolor2';
|
||||
import { defaultStore } from '@/store';
|
||||
import { useChartTooltip } from '@/scripts/use-chart-tooltip';
|
||||
import { chartVLine } from '@/scripts/chart-vline';
|
||||
import { alpha } from '@/scripts/color';
|
||||
import { initChart } from '@/scripts/init-chart';
|
||||
import * as os from '@/os';
|
||||
|
||||
initChart();
|
||||
|
||||
const chartEl = shallowRef<HTMLCanvasElement>(null);
|
||||
|
||||
const { handler: externalTooltipHandler } = useChartTooltip();
|
||||
|
||||
let chartInstance: Chart;
|
||||
|
||||
const getYYYYMMDD = (date: Date) => {
|
||||
const y = date.getFullYear().toString().padStart(2, '0');
|
||||
const m = (date.getMonth() + 1).toString().padStart(2, '0');
|
||||
const d = date.getDate().toString().padStart(2, '0');
|
||||
return `${y}/${m}/${d}`;
|
||||
};
|
||||
|
||||
const getDate = (ymd: string) => {
|
||||
const [y, m, d] = ymd.split('-').map(x => parseInt(x, 10));
|
||||
const date = new Date(y, m + 1, d, 0, 0, 0, 0);
|
||||
return date;
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
let raw = await os.api('retention', { });
|
||||
|
||||
const vLineColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
|
||||
|
||||
const accent = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--accent'));
|
||||
const color = accent.toHex();
|
||||
|
||||
chartInstance = new Chart(chartEl.value, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [],
|
||||
datasets: raw.map((record, i) => ({
|
||||
label: getYYYYMMDD(new Date(record.createdAt)),
|
||||
pointRadius: 0,
|
||||
borderWidth: 2,
|
||||
borderJoinStyle: 'round',
|
||||
borderColor: alpha(color, Math.min(1, (raw.length - (i - 1)) / raw.length)),
|
||||
fill: false,
|
||||
tension: 0.4,
|
||||
data: [{
|
||||
x: '0',
|
||||
y: 100,
|
||||
d: getYYYYMMDD(new Date(record.createdAt)),
|
||||
}, ...Object.entries(record.data).sort((a, b) => getDate(a[0]) > getDate(b[0]) ? 1 : -1).map(([k, v], i) => ({
|
||||
x: (i + 1).toString(),
|
||||
y: (v / record.users) * 100,
|
||||
d: getYYYYMMDD(new Date(record.createdAt)),
|
||||
}))],
|
||||
})),
|
||||
},
|
||||
options: {
|
||||
aspectRatio: 2.5,
|
||||
layout: {
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Days later',
|
||||
},
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Rate (%)',
|
||||
},
|
||||
ticks: {
|
||||
callback: (value, index, values) => value + '%',
|
||||
},
|
||||
},
|
||||
},
|
||||
interaction: {
|
||||
intersect: false,
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
callbacks: {
|
||||
title(context) {
|
||||
const v = context[0].dataset.data[context[0].dataIndex];
|
||||
return `${v.x} days later`;
|
||||
},
|
||||
label(context) {
|
||||
const v = context.dataset.data[context.dataIndex];
|
||||
const p = Math.round(v.y) + '%';
|
||||
return `${v.d} ${p}`;
|
||||
},
|
||||
},
|
||||
mode: 'index',
|
||||
animation: {
|
||||
duration: 0,
|
||||
},
|
||||
external: externalTooltipHandler,
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [chartVLine(vLineColor)],
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
Loading…
Reference in New Issue