sparkline: dynamic bar width, log scale x-axis option
This commit is contained in:
parent
45814286b8
commit
2803bca1c3
2 changed files with 33 additions and 14 deletions
|
|
@ -13,9 +13,14 @@ Canvas {
|
|||
readonly property real _max: maxValue !== null && maxValue !== undefined ? maxValue : (history.length ? Math.max(...history) : 100)
|
||||
readonly property real _min: minValue !== null && minValue !== undefined ? minValue : (history.length ? Math.min(...history) : 0)
|
||||
|
||||
// Max x-axis slots (0 = use history.length, right-aligns shorter data)
|
||||
// Max x-axis slots - bars get narrower as data fills up, then oldest drops off
|
||||
property int maxSamples: 0
|
||||
|
||||
// Logarithmic x-axis: compresses old data on the left, expands recent data on the right.
|
||||
// logCurve controls strength (0 = linear, 3 = strong compression). Only visual - does not affect data.
|
||||
property bool logScale: false
|
||||
property real logCurve: 3
|
||||
|
||||
// Optional background tint using `color` at low opacity
|
||||
property real backgroundTint: 0 // 0 = off, e.g. 0.15 for memory, 0.08 for temperature
|
||||
|
||||
|
|
@ -47,9 +52,7 @@ Canvas {
|
|||
if (!d.length || (areaMode && d.length < 2))
|
||||
return;
|
||||
|
||||
const samples = maxSamples > 0 ? maxSamples : d.length;
|
||||
const step = width / samples;
|
||||
const offset = samples - d.length;
|
||||
const n = d.length;
|
||||
const lo = _min;
|
||||
const hi = _max;
|
||||
const range = hi - lo || 1;
|
||||
|
|
@ -57,6 +60,20 @@ Canvas {
|
|||
return height - height * ((v - lo) / range);
|
||||
}
|
||||
|
||||
// x-axis mapping: returns [x, barWidth] for data index i
|
||||
const k = logScale ? logCurve : 0;
|
||||
const expK = k > 0 ? Math.exp(k) - 1 : 0;
|
||||
function xOf(i) {
|
||||
if (k > 0) {
|
||||
const x0 = width * (Math.exp(k * i / n) - 1) / expK;
|
||||
const x1 = width * (Math.exp(k * (i + 1) / n) - 1) / expK;
|
||||
return [x0, x1 - x0];
|
||||
}
|
||||
const step = width / (maxSamples > n ? maxSamples : n);
|
||||
const off = maxSamples > n ? (maxSamples - n) * step : 0;
|
||||
return [off + i * step, step];
|
||||
}
|
||||
|
||||
// Background tint
|
||||
if (backgroundTint > 0) {
|
||||
ctx.fillStyle = Qt.rgba(color.r, color.g, color.b, backgroundTint).toString();
|
||||
|
|
@ -93,22 +110,24 @@ Canvas {
|
|||
|
||||
if (areaMode) {
|
||||
// Filled area under curve
|
||||
const xOff = offset * step;
|
||||
const baseY = lo < 0 ? yOf(0) : height;
|
||||
const [x0] = xOf(0);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xOff, baseY);
|
||||
for (let i = 0; i < d.length; i++) {
|
||||
ctx.lineTo(xOff + i * step, yOf(d[i]));
|
||||
ctx.moveTo(x0, baseY);
|
||||
for (let i = 0; i < n; i++) {
|
||||
const [x] = xOf(i);
|
||||
ctx.lineTo(x, yOf(d[i]));
|
||||
}
|
||||
ctx.lineTo(xOff + (d.length - 1) * step, baseY);
|
||||
const [xLast] = xOf(n - 1);
|
||||
ctx.lineTo(xLast, baseY);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = Qt.rgba(color.r, color.g, color.b, areaOpacity).toString();
|
||||
ctx.fill();
|
||||
|
||||
// Top stroke
|
||||
ctx.beginPath();
|
||||
for (let i = 0; i < d.length; i++) {
|
||||
const x = xOff + i * step;
|
||||
for (let i = 0; i < n; i++) {
|
||||
const [x] = xOf(i);
|
||||
if (i === 0)
|
||||
ctx.moveTo(x, yOf(d[i]));
|
||||
else
|
||||
|
|
@ -123,13 +142,14 @@ Canvas {
|
|||
const zy = lo < 0 ? yOf(0) : height;
|
||||
if (!hasCF)
|
||||
ctx.fillStyle = color.toString();
|
||||
for (let i = 0; i < d.length; i++) {
|
||||
for (let i = 0; i < n; i++) {
|
||||
if (hasCF)
|
||||
ctx.fillStyle = colorFunction(d[i]).toString();
|
||||
const [bx, bw] = xOf(i);
|
||||
const dy = yOf(d[i]);
|
||||
const barTop = Math.min(dy, zy);
|
||||
const barH = Math.max(1, Math.abs(dy - zy));
|
||||
ctx.fillRect((offset + i) * step, barTop, Math.max(1, step - 0.5), barH);
|
||||
ctx.fillRect(bx, barTop, Math.max(1, bw - 0.5), barH);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue