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;">
<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>
<option value="ap-requests-inbox-received">Fediverse Requests: inboxReceived</option>
<option value="ap-requests-deliver-succeeded">Fediverse Requests: deliverSucceeded</option>
<option value="ap-requests-deliver-failed">Fediverse Requests: deliverFailed</option>
</MkSelect>
<div class="_panel" :class="$style.heatmap">
<MkHeatmap :src="heatmapSrc"/>

View File

@ -68,8 +68,8 @@ onMounted(async () => {
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 succColor = '#87e000';
const failColor = '#ff4400';
const succColor = '#9ccfd8';
const failColor = '#f6c177';
const succMax = Math.max(...raw.deliverSucceeded);
const failMax = Math.max(...raw.deliverFailed);
@ -190,7 +190,7 @@ onMounted(async () => {
borderWidth: 0,
borderJoinStyle: 'round',
borderRadius: 4,
backgroundColor: '#0cc2d6',
backgroundColor: '#c4a7e7',
barPercentage: 0.8,
categoryPercentage: 0.9,
fill: true,
@ -264,7 +264,7 @@ onMounted(async () => {
},
plugins: [chartVLine(vLineColor)],
});
fetching = false;
});
</script>

View File

@ -3,9 +3,9 @@
<MkSelect v-model="src" style="margin: 0 0 12px 0;" small>
<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>
<option value="ap-requests-inbox-received">Fediverse Requests: inboxReceived</option>
<option value="ap-requests-deliver-succeeded">Fediverse Requests: deliverSucceeded</option>
<option value="ap-requests-deliver-failed">Fediverse Requests: deliverFailed</option>
</MkSelect>
<MkHeatmap :src="src"/>
</div>

View File

@ -32,7 +32,7 @@
</MkFolder>
<MkFolder class="item">
<template #header>Ap requests</template>
<template #header>Fediverse Requests</template>
<XApRequests/>
</MkFolder>

View File

@ -1,23 +1,24 @@
import { Plugin } from 'chart.js';
import { Plugin } from "chart.js";
export const chartVLine = (vLineColor: string) => ({
id: 'vLine',
beforeDraw(chart, args, options) {
if (chart.tooltip?._active?.length) {
const ctx = chart.ctx;
const xs = chart.tooltip._active.map(a => a.element.x);
const x = xs.reduce((a, b) => a + b, 0) / xs.length;
const topY = chart.scales.y.top;
const bottomY = chart.scales.y.bottom;
export const chartVLine = (vLineColor: string) =>
({
id: "vLine",
beforeDraw(chart, args, options) {
if (chart.tooltip?._active?.length) {
const ctx = chart.ctx;
const xs = chart.tooltip._active.map((a) => a.element.x);
const x = xs.reduce((a, b) => a + b, 0) / xs.length;
const topY = chart.scales.y.top;
const bottomY = chart.scales.y.bottom;
ctx.save();
ctx.beginPath();
ctx.moveTo(x, bottomY);
ctx.lineTo(x, topY);
ctx.lineWidth = 1;
ctx.strokeStyle = vLineColor;
ctx.stroke();
ctx.restore();
}
},
}) as Plugin;
ctx.save();
ctx.beginPath();
ctx.moveTo(x, bottomY);
ctx.lineTo(x, topY);
ctx.lineWidth = 1;
ctx.strokeStyle = vLineColor;
ctx.stroke();
ctx.restore();
}
},
}) as Plugin;