138 lines
4.9 KiB
JavaScript
138 lines
4.9 KiB
JavaScript
'use strict';
|
|
|
|
const MiniChart = (() => {
|
|
function draw(canvas, series, opts) {
|
|
const o = opts || {};
|
|
const dpr = window.devicePixelRatio || 1;
|
|
canvas.width = canvas.clientWidth * dpr;
|
|
canvas.height = 140 * dpr;
|
|
const ctx = canvas.getContext('2d');
|
|
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
|
const w = canvas.clientWidth, h = 140;
|
|
ctx.clearRect(0, 0, w, h);
|
|
const max = Math.max(o.max || 10, ...series.map((s) => Math.max(...s.points, 0)), 1);
|
|
const pad = 8;
|
|
ctx.strokeStyle = o.grid || '#e0e0e0';
|
|
ctx.lineWidth = 1;
|
|
for (let g = 0; g <= 4; g++) {
|
|
const y = pad + (h - pad * 2) * g / 4;
|
|
ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(w, y); ctx.stroke();
|
|
}
|
|
series.forEach((s) => {
|
|
const pts = s.points;
|
|
if (!pts || pts.length < 2) return;
|
|
ctx.strokeStyle = s.color || '#1976d2';
|
|
ctx.lineWidth = 2;
|
|
ctx.beginPath();
|
|
let started = false;
|
|
pts.forEach((v, i) => {
|
|
if (v == null) { started = false; return; }
|
|
const x = pad + (w - pad * 2) * i / Math.max(pts.length - 1, 1);
|
|
const y = h - pad - (h - pad * 2) * (v / max);
|
|
if (!started) { ctx.moveTo(x, y); started = true; } else ctx.lineTo(x, y);
|
|
});
|
|
ctx.stroke();
|
|
const last = pts[pts.length - 1];
|
|
if (last != null) {
|
|
const x = pad + (w - pad * 2) * (pts.length - 1) / Math.max(pts.length - 1, 1);
|
|
const y = h - pad - (h - pad * 2) * (last / max);
|
|
ctx.fillStyle = s.color || '#1976d2';
|
|
ctx.beginPath(); ctx.arc(x, y, 3, 0, Math.PI * 2); ctx.fill();
|
|
}
|
|
});
|
|
}
|
|
|
|
function doughnut(canvas, segments, opts) {
|
|
const o = opts || {};
|
|
const dpr = window.devicePixelRatio || 1;
|
|
const legendH = o.legend ? 22 : 0;
|
|
const H = (o.height || 160) + legendH;
|
|
canvas.width = canvas.clientWidth * dpr;
|
|
canvas.height = H * dpr;
|
|
const ctx = canvas.getContext('2d');
|
|
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
|
const w = canvas.clientWidth, h = o.height || 160;
|
|
ctx.clearRect(0, 0, w, H);
|
|
const cx = w / 2, cy = h / 2;
|
|
const r = Math.min(w, h) / 2 - 8;
|
|
const hole = (o.hole == null ? 0.65 : o.hole) * r;
|
|
const total = segments.reduce((s, x) => s + x.value, 0);
|
|
if (!total) {
|
|
ctx.strokeStyle = '#e0e0e0';
|
|
ctx.lineWidth = 1;
|
|
ctx.beginPath(); ctx.arc(cx, cy, r, 0, Math.PI * 2); ctx.stroke();
|
|
ctx.beginPath(); ctx.arc(cx, cy, hole, 0, Math.PI * 2); ctx.stroke();
|
|
return;
|
|
}
|
|
let a0 = -Math.PI / 2;
|
|
segments.forEach((seg) => {
|
|
const a1 = a0 + (seg.value / total) * Math.PI * 2;
|
|
ctx.fillStyle = seg.color;
|
|
ctx.beginPath();
|
|
ctx.arc(cx, cy, r, a0, a1);
|
|
ctx.arc(cx, cy, hole, a1, a0, true);
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
a0 = a1;
|
|
});
|
|
ctx.strokeStyle = o.stroke || '#ffffff';
|
|
ctx.lineWidth = 1;
|
|
ctx.beginPath(); ctx.arc(cx, cy, r, 0, Math.PI * 2); ctx.stroke();
|
|
ctx.beginPath(); ctx.arc(cx, cy, hole, 0, Math.PI * 2); ctx.stroke();
|
|
if (o.legend) {
|
|
ctx.font = '11px Roboto, "Segoe UI", Arial, sans-serif';
|
|
const dots = segments.filter((s) => s.value > 0);
|
|
let tw = 0;
|
|
dots.forEach((s) => { tw += 16 + ctx.measureText(s.label).width + 8; });
|
|
tw = Math.max(tw - 8, 0);
|
|
let x = (w - tw) / 2;
|
|
const ly = h + 13;
|
|
dots.forEach((s) => {
|
|
ctx.fillStyle = s.color;
|
|
ctx.beginPath(); ctx.arc(x + 4, ly - 3, 4, 0, Math.PI * 2); ctx.fill();
|
|
ctx.fillStyle = '#686868';
|
|
ctx.textAlign = 'left';
|
|
ctx.fillText(s.label, x + 12, ly);
|
|
x += 16 + ctx.measureText(s.label).width + 8;
|
|
});
|
|
}
|
|
}
|
|
|
|
function bar(canvas, items, opts) {
|
|
const o = opts || {};
|
|
const dpr = window.devicePixelRatio || 1;
|
|
const H = o.height || 160;
|
|
canvas.width = canvas.clientWidth * dpr;
|
|
canvas.height = H * dpr;
|
|
const ctx = canvas.getContext('2d');
|
|
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
|
const w = canvas.clientWidth, h = H;
|
|
ctx.clearRect(0, 0, w, h);
|
|
if (!items || !items.length) return;
|
|
const max = Math.max(1, ...items.map((i) => i.value));
|
|
const padB = 16, padT = 8, padL = 6, padR = 6;
|
|
const plotW = w - padL - padR, plotH = h - padT - padB;
|
|
const bw = plotW / items.length;
|
|
ctx.strokeStyle = o.grid || '#e0e0e0';
|
|
ctx.lineWidth = 1;
|
|
for (let g = 0; g <= 4; g++) {
|
|
const y = padT + plotH * g / 4;
|
|
ctx.beginPath(); ctx.moveTo(padL, y); ctx.lineTo(w - padR, y); ctx.stroke();
|
|
}
|
|
items.forEach((it, i) => {
|
|
const bh = it.value / max * plotH;
|
|
const x = padL + bw * i + bw * 0.15;
|
|
const wd = bw * 0.7;
|
|
const y = padT + plotH - bh;
|
|
ctx.fillStyle = it.color;
|
|
ctx.fillRect(x, y, wd, bh);
|
|
ctx.fillStyle = '#686868';
|
|
ctx.font = '10px Roboto, "Segoe UI", Arial, sans-serif';
|
|
ctx.textAlign = 'center';
|
|
ctx.fillText(String(it.label), padL + bw * i + bw / 2, h - 4);
|
|
});
|
|
}
|
|
|
|
return { draw, doughnut, bar };
|
|
})();
|