yume/paricafe
1
0
Fork 0
mirror of https://github.com/paricafe/misskey.git synced 2024-11-28 15:26:44 -06:00
Code Issues Projects Releases Packages Wiki Activity

enhance(frontend): tweak retention rate heatmap rendering

Browse source
This commit is contained in:
syuilo 2023-04-20 10:41:09 +09:00
parent 7cc797062d
commit 206baa13e6
1 changed files with 19 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
packages/frontend/src/components/MkRetentionHeatmap.vue
View file

@ -44,7 +44,13 @@ async function renderChart() {
const data = []; const data = [];
for (const record of raw) { for (const record of raw) {
let i = 0; data.push({
x: 0,
y: record.createdAt,
v: record.users,
});
let i = 1;
for (const date of Object.keys(record.data).sort((a, b) => new Date(a).getTime() - new Date(b).getTime())) { for (const date of Object.keys(record.data).sort((a, b) => new Date(a).getTime() - new Date(b).getTime())) {
data.push({ data.push({
x: i, x: i,
@ -61,8 +67,14 @@ async function renderChart() {
const color = defaultStore.state.darkMode ? '#b4e900' : '#86b300'; const color = defaultStore.state.darkMode ? '#b4e900' : '#86b300';
// 視覚上の分かりやすさのため上から最も大きい3つの値の平均を最大値とする const getYYYYMMDD = (date: Date) => {
const max = raw.map(x => x.users).slice().sort((a, b) => b - a).slice(0, 3).reduce((a, b) => a + b, 0) / 3; 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 max = (createdAt: string) => raw.find(x => x.createdAt === createdAt)!.users;
const marginEachCell = 12; const marginEachCell = 12;
@ -78,7 +90,7 @@ async function renderChart() {
borderRadius: 3, borderRadius: 3,
backgroundColor(c) { backgroundColor(c) {
const value = c.dataset.data[c.dataIndex].v; const value = c.dataset.data[c.dataIndex].v;
const a = value / max; const a = value / max(c.dataset.data[c.dataIndex].y);
return alpha(color, a); return alpha(color, a);
}, },
fill: true, fill: true,
@ -115,7 +127,7 @@ async function renderChart() {
maxRotation: 0, maxRotation: 0,
autoSkipPadding: 0, autoSkipPadding: 0,
autoSkip: false, autoSkip: false,
callback: (value, index, values) => value + 1, callback: (value, index, values) => value,
}, },
}, },
y: { y: {
@ -150,11 +162,11 @@ async function renderChart() {
callbacks: { callbacks: {
title(context) { title(context) {
const v = context[0].dataset.data[context[0].dataIndex]; const v = context[0].dataset.data[context[0].dataIndex];
return v.d; return getYYYYMMDD(new Date(new Date(v.y).getTime() + (v.x * 86400000)));
}, },
label(context) { label(context) {
const v = context.dataset.data[context.dataIndex]; const v = context.dataset.data[context.dataIndex];
return ['Active: ' + v.v]; return [`Active: ${v.v} (${Math.round((v.v / max(v.y)) * 100)}%)`];
}, },
}, },
//mode: 'index', //mode: 'index',