This commit is contained in:
2026-06-22 10:38:05 +03:00
parent dced122f10
commit e17e36a4c9
2 changed files with 68 additions and 50 deletions
+67 -49
View File
@@ -2,6 +2,8 @@
(function (global) {
'use strict';
const QUALITY_BUCKET = 10;
function niceMeterStep(span) {
if (span <= 50) return 10;
if (span <= 150) return 25;
@@ -28,7 +30,12 @@
return ticks;
}
function drawMeterAxis(ctx, margin, plotW, plotH, h, minD, span, w) {
function qualityBucket(quality) {
const q = Math.round(Number(quality) / QUALITY_BUCKET) * QUALITY_BUCKET;
return Math.min(100, Math.max(0, q));
}
function drawMeterAxis(ctx, margin, plotW, plotH, h, minD, span) {
const ticks = niceMeterTicks(minD, minD + span);
const minLabelGap = 28;
const maxLabels = Math.max(2, Math.floor(plotW / minLabelGap));
@@ -57,6 +64,15 @@
});
}
function histogramInBin(qualities) {
const hist = new Map();
for (const q of qualities) {
const bucket = qualityBucket(q);
hist.set(bucket, (hist.get(bucket) || 0) + 1);
}
return hist;
}
function drawQualityDistChart(canvas, samples, qualityColor, highlightDist) {
if (!canvas) return;
const ctx = canvas.getContext('2d');
@@ -78,15 +94,16 @@
const minD = Math.min(...dists);
const maxD = Math.max(...dists);
const span = Math.max(maxD - minD, 1);
const binCount = Math.min(40, Math.max(8, Math.ceil(span / 5)));
const binW = span / binCount;
const meterStep = niceMeterStep(span);
const binCount = Math.min(60, Math.max(1, Math.ceil(span / meterStep)));
const binWDist = span / binCount;
const bins = Array.from({ length: binCount }, (_, i) => ({
min: minD + i * binW,
max: minD + (i + 1) * binW,
min: minD + i * binWDist,
max: minD + (i + 1) * binWDist,
qualities: [],
}));
for (const s of samples) {
let idx = Math.floor((s.distM - minD) / binW);
let idx = Math.floor((s.distM - minD) / binWDist);
if (idx >= binCount) idx = binCount - 1;
if (idx < 0) idx = 0;
bins[idx].qualities.push(s.quality);
@@ -95,72 +112,73 @@
const margin = { l: 36, r: 8, t: 16, b: 30 };
const plotW = w - margin.l - margin.r;
const plotH = h - margin.t - margin.b;
const distBandH = Math.round(plotH * 0.25);
const qualBandH = plotH - distBandH - 4;
const qualTop = margin.t;
const distTop = margin.t + qualBandH + 4;
const axisY = margin.t + plotH;
const barW = plotW / binCount;
const markerH = Math.max(3, Math.min(6, barW * 0.45));
ctx.strokeStyle = '#333';
ctx.beginPath();
ctx.moveTo(margin.l, qualTop);
ctx.lineTo(margin.l, axisY);
ctx.lineTo(margin.l + plotW, axisY);
ctx.moveTo(margin.l, margin.t);
ctx.lineTo(margin.l, margin.t + plotH);
ctx.lineTo(margin.l + plotW, margin.t + plotH);
ctx.stroke();
ctx.fillStyle = '#888';
ctx.font = '9px system-ui';
ctx.fillText('0%', 2, distTop - 2);
ctx.fillText('100%', 2, qualTop + 8);
ctx.fillStyle = '#666';
ctx.fillText('точки', 2, distTop + distBandH - 2);
ctx.fillText('0%', 2, margin.t + plotH);
ctx.fillText('100%', 2, margin.t + 8);
drawMeterAxis(ctx, margin, plotW, plotH, h, minD, span, w);
const barW = plotW / binCount;
let maxCount = 1;
bins.forEach(b => {
if (b.qualities.length > maxCount) maxCount = b.qualities.length;
});
drawMeterAxis(ctx, margin, plotW, plotH, h, minD, span);
bins.forEach((b, i) => {
const x = margin.l + i / binCount * plotW;
const count = b.qualities.length;
const x0 = margin.l + i / binCount * plotW;
const cx = x0 + barW / 2;
const highlight = highlightDist != null
&& highlightDist >= b.min && highlightDist < b.max;
const count = b.qualities.length;
if (count === 0) {
ctx.fillStyle = 'rgba(255,255,255,0.08)';
ctx.fillRect(x, distTop + distBandH - 1, barW, 1);
} else {
const distBarH = (count / maxCount) * distBandH;
const intensity = 0.35 + 0.65 * (count / maxCount);
ctx.fillStyle = `rgba(74, 85, 104, ${intensity})`;
ctx.fillRect(x, distTop + distBandH - distBarH, barW, distBarH);
ctx.fillStyle = 'rgba(255,255,255,0.06)';
ctx.fillRect(x0, margin.t + plotH - 1, barW, 1);
return;
}
const avg = b.qualities.reduce((a, v) => a + v, 0) / count;
const qualBarH = (avg / 100) * qualBandH;
const y = qualTop + qualBandH - qualBarH;
const col = qualityColor ? qualityColor(avg) : '#888';
const hist = histogramInBin(b.qualities);
let maxInBin = 1;
hist.forEach(c => {
if (c > maxInBin) maxInBin = c;
});
if (highlight) {
ctx.fillStyle = 'rgba(255,255,255,0.06)';
ctx.fillRect(x0, margin.t, barW, plotH);
}
const sortedBuckets = Array.from(hist.keys()).sort((a, b) => a - b);
for (const bq of sortedBuckets) {
const n = hist.get(bq);
const frac = n / maxInBin;
const segW = Math.max(2, frac * (barW - 1));
const y = margin.t + plotH - (bq / 100) * plotH;
const col = qualityColor ? qualityColor(bq) : '#888';
ctx.fillStyle = col;
ctx.globalAlpha = highlight ? 1 : 0.75;
ctx.fillRect(x, y, barW, qualBarH);
ctx.globalAlpha = highlight ? 0.95 : (0.45 + 0.55 * frac);
ctx.fillRect(cx - segW / 2, y - markerH / 2, segW, markerH);
ctx.globalAlpha = 1;
if (highlight) {
ctx.strokeStyle = '#fff';
ctx.lineWidth = 1.5;
ctx.strokeRect(x, y, barW, qualBarH);
ctx.strokeRect(x, distTop + distBandH - distBarH, barW, distBarH);
}
}
if (highlight) {
ctx.strokeStyle = 'rgba(255,255,255,0.85)';
ctx.lineWidth = 1.5;
ctx.strokeRect(x0 + 0.5, margin.t + 0.5, barW - 1, plotH - 1);
}
});
ctx.fillStyle = 'rgba(255,255,255,0.25)';
ctx.fillStyle = 'rgba(255,255,255,0.18)';
samples.forEach(s => {
const x = margin.l + ((s.distM - minD) / span) * plotW;
const y = qualTop + qualBandH - (s.quality / 100) * qualBandH;
const y = margin.t + plotH - (s.quality / 100) * plotH;
ctx.beginPath();
ctx.arc(x, y, 1.5, 0, Math.PI * 2);
ctx.arc(x, y, 1.2, 0, Math.PI * 2);
ctx.fill();
});
}