chore: formatting
This commit is contained in:
parent
81cc4b3f49
commit
688368e4e1
|
@ -41,9 +41,9 @@
|
||||||
<MkSelect v-model="heatmapSrc" style="margin: 0 0 12px 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">Fediverse Requests: inboxReceived</option>
|
||||||
<option value="ap-requests-deliver-succeeded">AP Requests: deliverSucceeded</option>
|
<option value="ap-requests-deliver-succeeded">Fediverse Requests: deliverSucceeded</option>
|
||||||
<option value="ap-requests-deliver-failed">AP Requests: deliverFailed</option>
|
<option value="ap-requests-deliver-failed">Fediverse Requests: deliverFailed</option>
|
||||||
</MkSelect>
|
</MkSelect>
|
||||||
<div class="_panel" :class="$style.heatmap">
|
<div class="_panel" :class="$style.heatmap">
|
||||||
<MkHeatmap :src="heatmapSrc"/>
|
<MkHeatmap :src="heatmapSrc"/>
|
||||||
|
|
|
@ -68,8 +68,8 @@ onMounted(async () => {
|
||||||
const raw = await os.api('charts/ap-request', { limit: chartLimit, span: 'day' });
|
const raw = await os.api('charts/ap-request', { limit: chartLimit, span: 'day' });
|
||||||
|
|
||||||
const vLineColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
|
const vLineColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
|
||||||
const succColor = '#87e000';
|
const succColor = '#9ccfd8';
|
||||||
const failColor = '#ff4400';
|
const failColor = '#f6c177';
|
||||||
|
|
||||||
const succMax = Math.max(...raw.deliverSucceeded);
|
const succMax = Math.max(...raw.deliverSucceeded);
|
||||||
const failMax = Math.max(...raw.deliverFailed);
|
const failMax = Math.max(...raw.deliverFailed);
|
||||||
|
@ -190,7 +190,7 @@ onMounted(async () => {
|
||||||
borderWidth: 0,
|
borderWidth: 0,
|
||||||
borderJoinStyle: 'round',
|
borderJoinStyle: 'round',
|
||||||
borderRadius: 4,
|
borderRadius: 4,
|
||||||
backgroundColor: '#0cc2d6',
|
backgroundColor: '#c4a7e7',
|
||||||
barPercentage: 0.8,
|
barPercentage: 0.8,
|
||||||
categoryPercentage: 0.9,
|
categoryPercentage: 0.9,
|
||||||
fill: true,
|
fill: true,
|
||||||
|
|
|
@ -3,9 +3,9 @@
|
||||||
<MkSelect v-model="src" style="margin: 0 0 12px 0;" small>
|
<MkSelect v-model="src" style="margin: 0 0 12px 0;" small>
|
||||||
<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">Fediverse Requests: inboxReceived</option>
|
||||||
<option value="ap-requests-deliver-succeeded">AP Requests: deliverSucceeded</option>
|
<option value="ap-requests-deliver-succeeded">Fediverse Requests: deliverSucceeded</option>
|
||||||
<option value="ap-requests-deliver-failed">AP Requests: deliverFailed</option>
|
<option value="ap-requests-deliver-failed">Fediverse Requests: deliverFailed</option>
|
||||||
</MkSelect>
|
</MkSelect>
|
||||||
<MkHeatmap :src="src"/>
|
<MkHeatmap :src="src"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -32,7 +32,7 @@
|
||||||
</MkFolder>
|
</MkFolder>
|
||||||
|
|
||||||
<MkFolder class="item">
|
<MkFolder class="item">
|
||||||
<template #header>Ap requests</template>
|
<template #header>Fediverse Requests</template>
|
||||||
<XApRequests/>
|
<XApRequests/>
|
||||||
</MkFolder>
|
</MkFolder>
|
||||||
|
|
||||||
|
|
|
@ -1,23 +1,24 @@
|
||||||
import { Plugin } from 'chart.js';
|
import { Plugin } from "chart.js";
|
||||||
|
|
||||||
export const chartVLine = (vLineColor: string) => ({
|
export const chartVLine = (vLineColor: string) =>
|
||||||
id: 'vLine',
|
({
|
||||||
beforeDraw(chart, args, options) {
|
id: "vLine",
|
||||||
if (chart.tooltip?._active?.length) {
|
beforeDraw(chart, args, options) {
|
||||||
const ctx = chart.ctx;
|
if (chart.tooltip?._active?.length) {
|
||||||
const xs = chart.tooltip._active.map(a => a.element.x);
|
const ctx = chart.ctx;
|
||||||
const x = xs.reduce((a, b) => a + b, 0) / xs.length;
|
const xs = chart.tooltip._active.map((a) => a.element.x);
|
||||||
const topY = chart.scales.y.top;
|
const x = xs.reduce((a, b) => a + b, 0) / xs.length;
|
||||||
const bottomY = chart.scales.y.bottom;
|
const topY = chart.scales.y.top;
|
||||||
|
const bottomY = chart.scales.y.bottom;
|
||||||
|
|
||||||
ctx.save();
|
ctx.save();
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
ctx.moveTo(x, bottomY);
|
ctx.moveTo(x, bottomY);
|
||||||
ctx.lineTo(x, topY);
|
ctx.lineTo(x, topY);
|
||||||
ctx.lineWidth = 1;
|
ctx.lineWidth = 1;
|
||||||
ctx.strokeStyle = vLineColor;
|
ctx.strokeStyle = vLineColor;
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
ctx.restore();
|
ctx.restore();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
}) as Plugin;
|
}) as Plugin;
|
||||||
|
|
Loading…
Reference in New Issue