extract SparklineCanvas component from 5 applets
This commit is contained in:
parent
732a14e5cb
commit
8d76df6ef5
8 changed files with 178 additions and 233 deletions
|
|
@ -87,91 +87,28 @@ Column {
|
|||
}
|
||||
|
||||
// 24h history sparkline (area chart)
|
||||
Canvas {
|
||||
id: _sparkline
|
||||
SparklineCanvas {
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 12
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 12
|
||||
height: 44
|
||||
|
||||
property var _hist: S.BatteryService.history
|
||||
property color _col: root._stateColor
|
||||
|
||||
on_HistChanged: if (root.active)
|
||||
requestPaint()
|
||||
on_ColChanged: if (root.active)
|
||||
requestPaint()
|
||||
|
||||
onVisibleChanged: if (visible)
|
||||
requestPaint()
|
||||
|
||||
onPaint: {
|
||||
const ctx = getContext("2d");
|
||||
if (!ctx)
|
||||
return;
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
const d = _hist;
|
||||
if (d.length < 2)
|
||||
return;
|
||||
|
||||
const maxSamples = 1440;
|
||||
const xScale = width / maxSamples;
|
||||
const xOffset = (maxSamples - d.length) * xScale;
|
||||
|
||||
// Background tint
|
||||
ctx.fillStyle = Qt.rgba(_col.r, _col.g, _col.b, 0.07).toString();
|
||||
ctx.fillRect(0, 0, width, height);
|
||||
|
||||
// Warning threshold line
|
||||
const warnY = height - height * (S.BatteryService.warnThresh / 100);
|
||||
ctx.strokeStyle = S.Theme.base0A.toString();
|
||||
ctx.globalAlpha = 0.3;
|
||||
ctx.lineWidth = 1;
|
||||
ctx.setLineDash([3, 3]);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, warnY);
|
||||
ctx.lineTo(width, warnY);
|
||||
ctx.stroke();
|
||||
|
||||
// Critical threshold line
|
||||
const critY = height - height * (S.BatteryService.critThresh / 100);
|
||||
ctx.strokeStyle = S.Theme.base08.toString();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, critY);
|
||||
ctx.lineTo(width, critY);
|
||||
ctx.stroke();
|
||||
|
||||
ctx.setLineDash([]);
|
||||
ctx.globalAlpha = 1.0;
|
||||
|
||||
// Filled area under the curve
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xOffset, height);
|
||||
for (let i = 0; i < d.length; i++) {
|
||||
const x = xOffset + i * xScale;
|
||||
const y = height - height * (d[i] / 100);
|
||||
ctx.lineTo(x, y);
|
||||
history: S.BatteryService.history
|
||||
color: root._stateColor
|
||||
active: root.active
|
||||
maxSamples: 1440
|
||||
backgroundTint: 0.07
|
||||
areaMode: true
|
||||
thresholds: [
|
||||
{
|
||||
value: S.BatteryService.warnThresh,
|
||||
color: S.Theme.base0A
|
||||
},
|
||||
{
|
||||
value: S.BatteryService.critThresh,
|
||||
color: S.Theme.base08
|
||||
}
|
||||
ctx.lineTo(xOffset + (d.length - 1) * xScale, height);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = Qt.rgba(_col.r, _col.g, _col.b, 0.18).toString();
|
||||
ctx.fill();
|
||||
|
||||
// Top line
|
||||
ctx.beginPath();
|
||||
for (let i = 0; i < d.length; i++) {
|
||||
const x = xOffset + i * xScale;
|
||||
const y = height - height * (d[i] / 100);
|
||||
if (i === 0)
|
||||
ctx.moveTo(x, y);
|
||||
else
|
||||
ctx.lineTo(x, y);
|
||||
}
|
||||
ctx.strokeStyle = _col.toString();
|
||||
ctx.lineWidth = 1.5;
|
||||
ctx.stroke();
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
// Footer: thresholds + time label
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue