Ku6epXBOCTuK/github-support-sla-monitor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: resolve update charts blink

Browse Source
This commit is contained in:
Ku6epXBOCTuK
2026-09-07 09:43:54 +05:00
parent 56359afa2d
commit af1481160c
2 changed files with 187 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/dashboardCharts.ts
+85 -64
View File
@@ -14,19 +14,22 @@ const C = {
legend: "#8b8a83",
};
type ChartCtor = new (ctx: CanvasRenderingContext2D, config: object) => unknown;
type ChartCtor = new (ctx: CanvasRenderingContext2D, config: object) => ChartLike;
interface ChartLike {
data: { labels?: unknown[]; datasets: { data: number[] }[] };
update(mode?: string): void;
}
function getCtor(): ChartCtor | null {
const ChartClass = (window as unknown as { Chart?: unknown }).Chart;
return ChartClass ? (ChartClass as ChartCtor) : null;
}
let instances: { destroy(): void }[] = [];
function dispose(): void {
for (const instance of instances) instance.destroy();
instances = [];
}
let percentiles: ChartLike | null = null;
let perDay: ChartLike | null = null;
let wait: ChartLike | null = null;
let percentilesWait = 0;
function tooltip(): Record<string, unknown> {
return {
@@ -45,7 +48,6 @@ function buildRate(canvas: HTMLCanvasElement): void {
const ctor = getCtor();
const ctx = canvas.getContext("2d");
if (!ctor || !ctx) return;
instances.push(
new ctor(ctx, {
type: "doughnut",
data: {
@@ -60,23 +62,22 @@ function buildRate(canvas: HTMLCanvasElement): void {
circumference: 180,
plugins: { legend: { display: false }, tooltip: { enabled: false } },
},
}),
);
});
}
function buildPercentiles(canvas: HTMLCanvasElement, now: number): void {
function buildPercentiles(canvas: HTMLCanvasElement, now: number): ChartLike | null {
const ctor = getCtor();
const ctx = canvas.getContext("2d");
if (!ctor || !ctx) return;
const wait = Number(daysFloat(now, CREATED_MS).toFixed(1));
if (!ctor || !ctx) return null;
const waitVal = Number(daysFloat(now, CREATED_MS).toFixed(1));
percentilesWait = waitVal;
const datasets = [
{ label: "AVG", data: [wait, wait], borderColor: C.gold, borderWidth: 1, borderDash: [10, 6], pointRadius: 0, tension: 0 },
{ label: "P50", data: [wait, wait], borderColor: C.red, borderWidth: 1.5, pointRadius: 0, tension: 0 },
{ label: "P90", data: [wait, wait], borderColor: C.redP90, borderWidth: 1.5, borderDash: [5, 4], pointRadius: 0, tension: 0 },
{ label: "P99", data: [wait, wait], borderColor: C.redP99, borderWidth: 1.5, borderDash: [2, 4], pointRadius: 0, tension: 0 },
{ label: "AVG", data: [waitVal, waitVal], borderColor: C.gold, borderWidth: 1, borderDash: [10, 6], pointRadius: 0, tension: 0 },
{ label: "P50", data: [waitVal, waitVal], borderColor: C.red, borderWidth: 1.5, pointRadius: 0, tension: 0 },
{ label: "P90", data: [waitVal, waitVal], borderColor: C.redP90, borderWidth: 1.5, borderDash: [5, 4], pointRadius: 0, tension: 0 },
{ label: "P99", data: [waitVal, waitVal], borderColor: C.redP99, borderWidth: 1.5, borderDash: [2, 4], pointRadius: 0, tension: 0 },
];
instances.push(
new ctor(ctx, {
return new ctor(ctx, {
type: "line",
data: { labels: ["START", "TODAY"], datasets },
options: {
@@ -88,7 +89,7 @@ function buildPercentiles(canvas: HTMLCanvasElement, now: number): void {
tooltip: {
...tooltip(),
callbacks: {
label: (item) => ` ${item.dataset.label || ""}: ${wait}d (SINGLE SAMPLE)`,
label: (item) => ` ${item.dataset.label || ""}: ${percentilesWait}d (SINGLE SAMPLE)`,
},
},
},
@@ -103,39 +104,26 @@ function buildPercentiles(canvas: HTMLCanvasElement, now: number): void {
},
},
},
}),
);
});
}
function buildPerDay(canvas: HTMLCanvasElement, now: number): void {
function buildPerDay(canvas: HTMLCanvasElement): ChartLike | null {
const ctor = getCtor();
const ctx = canvas.getContext("2d");
if (!ctor || !ctx) return;
const days = daysCeil(now);
const mine: number[] = new Array(days).fill(0);
const bot: number[] = new Array(days).fill(0);
const human: number[] = new Array(days).fill(0);
for (const e of EVENTS) {
const idx = dayIndex(e.at.getTime());
if (idx < 0 || idx >= days) continue;
if (e.kind === "author") mine[idx]++;
else bot[idx]++;
}
const labels = Array.from({ length: days }, (_, i) => `D${i}`);
if (!ctor || !ctx) return null;
const axis = {
ticks: { color: C.axis, font: { family: FONT, size: 8 }, maxTicksLimit: 10, maxRotation: 0 },
grid: { color: C.grid },
border: { color: C.border },
};
instances.push(
new ctor(ctx, {
return new ctor(ctx, {
type: "bar",
data: {
labels,
labels: [],
datasets: [
{ label: "MY MESSAGES", data: mine, backgroundColor: C.gold, borderColor: C.gold, borderWidth: 1 },
{ label: "BOT REACTIONS", data: bot, backgroundColor: C.muted, borderColor: C.muted, borderWidth: 1 },
{ label: "HUMAN REPLIES", data: human, backgroundColor: C.red, borderColor: C.red, borderWidth: 1 },
{ label: "MY MESSAGES", data: [], backgroundColor: C.gold, borderColor: C.gold, borderWidth: 1 },
{ label: "BOT REACTIONS", data: [], backgroundColor: C.muted, borderColor: C.muted, borderWidth: 1 },
{ label: "HUMAN REPLIES", data: [], backgroundColor: C.red, borderColor: C.red, borderWidth: 1 },
],
},
options: {
@@ -157,29 +145,24 @@ function buildPerDay(canvas: HTMLCanvasElement, now: number): void {
},
},
},
}),
);
});
}
function buildWait(canvas: HTMLCanvasElement, now: number): void {
function buildWait(canvas: HTMLCanvasElement): ChartLike | null {
const ctor = getCtor();
const ctx = canvas.getContext("2d");
if (!ctor || !ctx) return;
const days = daysCeil(now);
const data = Array.from({ length: days }, (_, i) => i);
const labels = Array.from({ length: days }, (_, i) => `D${i}`);
if (!ctor || !ctx) return null;
const grad = ctx.createLinearGradient(0, 0, 0, 200);
grad.addColorStop(0, "rgba(231,76,60,0.28)");
grad.addColorStop(1, "rgba(231,76,60,0)");
instances.push(
new ctor(ctx, {
return new ctor(ctx, {
type: "line",
data: {
labels,
labels: [],
datasets: [
{
label: "DAYS WAITED",
data,
data: [],
borderColor: C.red,
borderWidth: 1.5,
backgroundColor: grad,
@@ -214,18 +197,56 @@ function buildWait(canvas: HTMLCanvasElement, now: number): void {
},
},
},
}),
);
});
}
export function renderCharts(now: number): void {
dispose();
const rate = document.querySelector<HTMLCanvasElement>("#chart-rate");
const percentiles = document.querySelector<HTMLCanvasElement>("#chart-percentiles");
const perDay = document.querySelector<HTMLCanvasElement>("#chart-per-day");
const wait = document.querySelector<HTMLCanvasElement>("#chart-wait");
if (rate) buildRate(rate);
if (percentiles) buildPercentiles(percentiles, now);
if (perDay) buildPerDay(perDay, now);
if (wait) buildWait(wait, now);
function updatePercentiles(chart: ChartLike, now: number): void {
const waitVal = Number(daysFloat(now, CREATED_MS).toFixed(1));
percentilesWait = waitVal;
for (const ds of chart.data.datasets) ds.data = [waitVal, waitVal];
chart.update();
}
function updatePerDay(chart: ChartLike, now: number): void {
const days = daysCeil(now);
const mine: number[] = new Array(days).fill(0);
const bot: number[] = new Array(days).fill(0);
const human: number[] = new Array(days).fill(0);
for (const e of EVENTS) {
const idx = dayIndex(e.at.getTime());
if (idx < 0 || idx >= days) continue;
if (e.kind === "author") mine[idx]++;
else bot[idx]++;
}
const labels = Array.from({ length: days }, (_, i) => `D${i}`);
chart.data.labels = labels;
for (let i = 0; i < chart.data.datasets.length; i++) {
chart.data.datasets[i].data = [mine, bot, human][i];
}
chart.update();
}
function updateWait(chart: ChartLike, now: number): void {
const days = daysCeil(now);
chart.data.labels = Array.from({ length: days }, (_, i) => `D${i}`);
chart.data.datasets[0].data = Array.from({ length: days }, (_, i) => i);
chart.update();
}
export function initCharts(): void {
const rate = document.querySelector<HTMLCanvasElement>("#chart-rate");
const p = document.querySelector<HTMLCanvasElement>("#chart-percentiles");
const d = document.querySelector<HTMLCanvasElement>("#chart-per-day");
const w = document.querySelector<HTMLCanvasElement>("#chart-wait");
if (rate) buildRate(rate);
percentiles = p ? buildPercentiles(p, Date.now()) : null;
perDay = d ? buildPerDay(d) : null;
wait = w ? buildWait(w) : null;
updateCharts(Date.now());
}
export function updateCharts(now: number): void {
if (percentiles) updatePercentiles(percentiles, now);
if (perDay) updatePerDay(perDay, now);
if (wait) updateWait(wait, now);
}
src/pages/dashboard.astro
+7 -3
View File
@@ -121,7 +121,7 @@ const base = import.meta.env.BASE_URL.replace(/\/+$/, "");
fmtElapsed,
fmtDaysHours,
} from "../data/caseData";
import { renderCharts } from "../lib/dashboardCharts";
import { initCharts, updateCharts } from "../lib/dashboardCharts";
function renderLog(): void {
const el = document.querySelector<HTMLElement>("#comments-log");
@@ -165,7 +165,7 @@ const base = import.meta.env.BASE_URL.replace(/\/+$/, "");
function refresh(): void {
const updated = document.querySelector<HTMLElement>("#last-updated");
if (updated) updated.textContent = fmtStamp(new Date());
renderCharts(Date.now());
updateCharts(Date.now());
}
const detailsLastComment = document.querySelector<HTMLElement>("#details-last-comment");
@@ -183,7 +183,11 @@ const base = import.meta.env.BASE_URL.replace(/\/+$/, "");
renderLog();
renderTimeline();
tick();
refresh();
const lastUpdated = document.querySelector<HTMLElement>("#last-updated");
if (lastUpdated) lastUpdated.textContent = fmtStamp(new Date());
initCharts();
window.setInterval(tick, 1000);
window.setInterval(refresh, 60000);