This commit is contained in:
parent
3def9ab3b7
commit
1b69006040
|
@ -1,8 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="zbcjwnqg">
|
<div :class="$style.root">
|
||||||
<div class="main">
|
<MkFoldableSection class="item">
|
||||||
<div class="body">
|
<template #header>Chart</template>
|
||||||
<div class="selects" style="display: flex;">
|
<div :class="$style.chart">
|
||||||
|
<div class="selects">
|
||||||
<MkSelect v-model="chartSrc" style="margin: 0; flex: 1;">
|
<MkSelect v-model="chartSrc" style="margin: 0; flex: 1;">
|
||||||
<optgroup :label="i18n.ts.federation">
|
<optgroup :label="i18n.ts.federation">
|
||||||
<option value="federation">{{ i18n.ts._charts.federation }}</option>
|
<option value="federation">{{ i18n.ts._charts.federation }}</option>
|
||||||
|
@ -29,25 +30,37 @@
|
||||||
<option value="day">{{ i18n.ts.perDay }}</option>
|
<option value="day">{{ i18n.ts.perDay }}</option>
|
||||||
</MkSelect>
|
</MkSelect>
|
||||||
</div>
|
</div>
|
||||||
<div class="chart">
|
<div class="chart _panel">
|
||||||
<MkChart :src="chartSrc" :span="chartSpan" :limit="chartLimit" :detailed="detailed"></MkChart>
|
<MkChart :src="chartSrc" :span="chartSpan" :limit="chartLimit" :detailed="true"></MkChart>
|
||||||
</div>
|
</div>
|
||||||
<div class="item">
|
</div>
|
||||||
|
</MkFoldableSection>
|
||||||
|
|
||||||
|
<MkFoldableSection class="item">
|
||||||
<template #header>Active users heatmap</template>
|
<template #header>Active users heatmap</template>
|
||||||
<MkSelect v-model="heatmapSrc" style="margin: 0 0 10px 0;">
|
<MkSelect v-model="heatmapSrc" style="margin: 0 0 12px 0;">
|
||||||
<option value="active-users">Active users</option>
|
<option value="active-users">Active users</option>
|
||||||
<option value="notes">Notes</option>
|
<option value="notes">Notes</option>
|
||||||
<option value="ap-requests-inbox-received">AP Requests: inboxReceived</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-succeeded">AP Requests: deliverSucceeded</option>
|
||||||
<option value="ap-requests-deliver-failed">AP Requests: deliverFailed</option>
|
<option value="ap-requests-deliver-failed">AP Requests: deliverFailed</option>
|
||||||
</MkSelect>
|
</MkSelect>
|
||||||
<div class="_panel heatmap">
|
<div class="_panel" :class="$style.heatmap">
|
||||||
<MkHeatmap :src="heatmapSrc"/>
|
<MkHeatmap :src="heatmapSrc"/>
|
||||||
</div>
|
</div>
|
||||||
|
</MkFoldableSection>
|
||||||
|
|
||||||
|
<MkFoldableSection class="item">
|
||||||
|
<template #header>Retention rate</template>
|
||||||
|
<div class="_panel" :class="$style.retention">
|
||||||
|
<MkRetentionHeatmap/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</MkFoldableSection>
|
||||||
</div>
|
|
||||||
<div class="subpub">
|
<MkFoldableSection class="item">
|
||||||
|
<template #header>Federation</template>
|
||||||
|
<div :class="$style.federation">
|
||||||
|
<div class="pies">
|
||||||
<div class="sub">
|
<div class="sub">
|
||||||
<div class="title">Sub</div>
|
<div class="title">Sub</div>
|
||||||
<canvas ref="subDoughnutEl"></canvas>
|
<canvas ref="subDoughnutEl"></canvas>
|
||||||
|
@ -58,65 +71,31 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</MkFoldableSection>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { onMounted } from 'vue';
|
import { onMounted } from 'vue';
|
||||||
import {
|
import { Chart } from 'chart.js';
|
||||||
Chart,
|
import MkSelect from '@/components/MkSelect.vue';
|
||||||
ArcElement,
|
|
||||||
LineElement,
|
|
||||||
BarElement,
|
|
||||||
PointElement,
|
|
||||||
BarController,
|
|
||||||
LineController,
|
|
||||||
CategoryScale,
|
|
||||||
LinearScale,
|
|
||||||
TimeScale,
|
|
||||||
Legend,
|
|
||||||
Title,
|
|
||||||
Tooltip,
|
|
||||||
SubTitle,
|
|
||||||
Filler,
|
|
||||||
DoughnutController,
|
|
||||||
} from 'chart.js';
|
|
||||||
import MkSelect from '@/components/form/select.vue';
|
|
||||||
import MkChart from '@/components/MkChart.vue';
|
import MkChart from '@/components/MkChart.vue';
|
||||||
import MkHeatmap from '@/components/MkHeatmap.vue';
|
|
||||||
import { useChartTooltip } from '@/scripts/use-chart-tooltip';
|
import { useChartTooltip } from '@/scripts/use-chart-tooltip';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
import { i18n } from '@/i18n';
|
import { i18n } from '@/i18n';
|
||||||
|
import MkHeatmap from '@/components/MkHeatmap.vue';
|
||||||
|
import MkFoldableSection from '@/components/MkFoldableSection.vue';
|
||||||
|
import MkRetentionHeatmap from '@/components/MkRetentionHeatmap.vue';
|
||||||
|
import { initChart } from '@/scripts/init-chart';
|
||||||
|
|
||||||
Chart.register(
|
initChart();
|
||||||
ArcElement,
|
|
||||||
LineElement,
|
|
||||||
BarElement,
|
|
||||||
PointElement,
|
|
||||||
BarController,
|
|
||||||
LineController,
|
|
||||||
DoughnutController,
|
|
||||||
CategoryScale,
|
|
||||||
LinearScale,
|
|
||||||
TimeScale,
|
|
||||||
Legend,
|
|
||||||
Title,
|
|
||||||
Tooltip,
|
|
||||||
SubTitle,
|
|
||||||
Filler,
|
|
||||||
);
|
|
||||||
|
|
||||||
const props = withDefaults(defineProps<{
|
|
||||||
chartLimit?: number;
|
|
||||||
detailed?: boolean;
|
|
||||||
}>(), {
|
|
||||||
chartLimit: 90,
|
|
||||||
});
|
|
||||||
|
|
||||||
|
const chartLimit = 500;
|
||||||
let chartSpan = $ref<'hour' | 'day'>('hour');
|
let chartSpan = $ref<'hour' | 'day'>('hour');
|
||||||
let chartSrc = $ref('active-users');
|
let chartSrc = $ref('active-users');
|
||||||
// let heatmapSrc = $ref('active-users');
|
let heatmapSrc = $ref('active-users');
|
||||||
let subDoughnutEl = $ref<HTMLCanvasElement>();
|
let subDoughnutEl = $shallowRef<HTMLCanvasElement>();
|
||||||
let pubDoughnutEl = $ref<HTMLCanvasElement>();
|
let pubDoughnutEl = $shallowRef<HTMLCanvasElement>();
|
||||||
|
|
||||||
const { handler: externalTooltipHandler1 } = useChartTooltip({
|
const { handler: externalTooltipHandler1 } = useChartTooltip({
|
||||||
position: 'middle',
|
position: 'middle',
|
||||||
|
@ -196,26 +175,41 @@ onMounted(() => {
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" module>
|
||||||
.zbcjwnqg {
|
.root {
|
||||||
> .main {
|
&:global {
|
||||||
background: var(--panel);
|
> .item {
|
||||||
border-radius: var(--radius);
|
|
||||||
padding: 24px;
|
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
|
|
||||||
> .body {
|
|
||||||
> .chart {
|
|
||||||
padding: 8px 0 0 0;
|
|
||||||
}
|
}
|
||||||
> .heatmap {
|
}
|
||||||
padding: 12px;
|
}
|
||||||
|
|
||||||
|
.chart {
|
||||||
|
&:global {
|
||||||
|
> .selects {
|
||||||
|
display: flex;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
> .chart {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> .subpub {
|
.heatmap {
|
||||||
|
padding: 16px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.retention {
|
||||||
|
padding: 16px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.federation {
|
||||||
|
&:global {
|
||||||
|
> .pies {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
|
|
||||||
|
@ -240,4 +234,5 @@ onMounted(() => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue