diff --git a/packages/frontend/src/components/MkActiveUsersHeatmap.vue b/packages/frontend/src/components/MkActiveUsersHeatmap.vue index 6b89a012f2..744193dd5f 100644 --- a/packages/frontend/src/components/MkActiveUsersHeatmap.vue +++ b/packages/frontend/src/components/MkActiveUsersHeatmap.vue @@ -132,12 +132,10 @@ async function renderChart() { fill: true, width(c) { const a = c.chart.chartArea ?? {}; - // 20週間 return (a.right - a.left) / weeks - marginEachCell; }, height(c) { const a = c.chart.chartArea ?? {}; - // 7日 return (a.bottom - a.top) / 7 - marginEachCell; }, }], diff --git a/packages/frontend/src/components/MkChart.vue b/packages/frontend/src/components/MkChart.vue index fbbc231b88..94cffa12cd 100644 --- a/packages/frontend/src/components/MkChart.vue +++ b/packages/frontend/src/components/MkChart.vue @@ -39,6 +39,7 @@ import * as os from '@/os'; import { defaultStore } from '@/store'; import { useChartTooltip } from '@/scripts/use-chart-tooltip'; import { chartVLine } from '@/scripts/chart-vline'; +import { alpha } from '@/scripts/color'; const props = defineProps({ src: { @@ -101,13 +102,6 @@ Chart.register( const sum = (...arr) => arr.reduce((r, a) => r.map((b, i) => a[i] + b)); const negate = arr => arr.map(x => -x); -const alpha = (hex, a) => { - const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!; - const r = parseInt(result[1], 16); - const g = parseInt(result[2], 16); - const b = parseInt(result[3], 16); - return `rgba(${r}, ${g}, ${b}, ${a})`; -}; const colors = { blue: '#008FFB', diff --git a/packages/frontend/src/components/MkInstanceStats.vue b/packages/frontend/src/components/MkInstanceStats.vue index 41f6f9ffd5..f01bb7426c 100644 --- a/packages/frontend/src/components/MkInstanceStats.vue +++ b/packages/frontend/src/components/MkInstanceStats.vue @@ -43,6 +43,13 @@ + + +
+ +
+
+
@@ -88,6 +95,7 @@ import * as os from '@/os'; import { i18n } from '@/i18n'; import MkActiveUsersHeatmap from '@/components/MkActiveUsersHeatmap.vue'; import MkFolder from '@/components/MkFolder.vue'; +import MkRetentionHeatmap from '@/components/MkRetentionHeatmap.vue'; Chart.register( ArcElement, @@ -224,6 +232,11 @@ onMounted(() => { margin-bottom: 16px; } +.retention { + padding: 16px; + margin-bottom: 16px; +} + .federation { &:global { > .pies { diff --git a/packages/frontend/src/components/MkRetentionHeatmap.vue b/packages/frontend/src/components/MkRetentionHeatmap.vue new file mode 100644 index 0000000000..cdfbd0d9a2 --- /dev/null +++ b/packages/frontend/src/components/MkRetentionHeatmap.vue @@ -0,0 +1,218 @@ + + + diff --git a/packages/frontend/src/pages/admin/overview.retention.vue b/packages/frontend/src/pages/admin/overview.retention.vue index feac6f8118..25de8a57c1 100644 --- a/packages/frontend/src/pages/admin/overview.retention.vue +++ b/packages/frontend/src/pages/admin/overview.retention.vue @@ -1,49 +1,15 @@