improve heatmap

This commit is contained in:
syuilo
2022-12-30 18:26:36 +09:00
parent 78a8e918a0
commit 3968597a7b
3 changed files with 61 additions and 18 deletions

View File

@@ -38,8 +38,15 @@
<MkFolder class="item">
<template #header>Active users heatmap</template>
<MkSelect v-model="heatmapSrc" style="margin: 0 0 12px 0;">
<option value="active-users">Active users</option>
<option value="notes">Notes</option>
<option value="ap-requests-inbox-received">AP Requests: inboxReceived</option>
<option value="ap-requests-deliver-succeeded">AP Requests: deliverSucceeded</option>
<option value="ap-requests-deliver-failed">AP Requests: deliverFailed</option>
</MkSelect>
<div class="_panel" :class="$style.heatmap">
<MkActiveUsersHeatmap/>
<MkHeatmap :src="heatmapSrc"/>
</div>
</MkFolder>
@@ -93,7 +100,7 @@ import MkChart from '@/components/MkChart.vue';
import { useChartTooltip } from '@/scripts/use-chart-tooltip';
import * as os from '@/os';
import { i18n } from '@/i18n';
import MkActiveUsersHeatmap from '@/components/MkActiveUsersHeatmap.vue';
import MkHeatmap from '@/components/MkHeatmap.vue';
import MkFolder from '@/components/MkFolder.vue';
import MkRetentionHeatmap from '@/components/MkRetentionHeatmap.vue';
@@ -115,15 +122,10 @@ Chart.register(
Filler,
);
const props = withDefaults(defineProps<{
chartLimit?: number;
detailed?: boolean;
}>(), {
chartLimit: 90,
});
const chartSpan = $ref<'hour' | 'day'>('hour');
const chartSrc = $ref('active-users');
const chartLimit = 90;
let chartSpan = $ref<'hour' | 'day'>('hour');
let chartSrc = $ref('active-users');
let heatmapSrc = $ref('active-users');
let subDoughnutEl = $ref<HTMLCanvasElement>();
let pubDoughnutEl = $ref<HTMLCanvasElement>();