chore: formatting

This commit is contained in:
ThatOneCalculator 2023-02-13 20:25:31 -08:00
parent 81cc4b3f49
commit 688368e4e1
No known key found for this signature in database
GPG key ID: 8703CACD01000000
5 changed files with 33 additions and 32 deletions

View file

@ -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"/>

View file

@ -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,

View file

@ -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>

View file

@ -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>

View file

@ -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;