111 lines
3.7 KiB
QML
111 lines
3.7 KiB
QML
import QtQuick
|
|
import qs.Services
|
|
|
|
// Compact circular statistic display used in the SidePanel
|
|
Rectangle {
|
|
id: root
|
|
|
|
readonly property real scaling: Scaling.scale(screen)
|
|
property real value: 0 // 0..100 (or any range visually mapped)
|
|
property string icon: ""
|
|
property string suffix: "%"
|
|
|
|
// When nested inside a parent group (NBox), you can make it flat
|
|
property bool flat: false
|
|
// Scales the internal content (labels, gauge, icon) without changing the
|
|
// outer width/height footprint of the component
|
|
property real contentScale: 1.0
|
|
|
|
width: 68 * scaling
|
|
height: 92 * scaling
|
|
color: flat ? "transparent" : Colors.backgroundSecondary
|
|
radius: Style.radiusSmall * scaling
|
|
border.color: flat ? "transparent" : Colors.backgroundTertiary
|
|
border.width: flat ? 0 : Math.max(1, Style.borderThin * scaling)
|
|
clip: true
|
|
|
|
// Repaint gauge when the bound value changes
|
|
onValueChanged: gauge.requestPaint()
|
|
|
|
Row {
|
|
id: innerRow
|
|
anchors.fill: parent
|
|
anchors.margins: Style.marginSmall * scaling * contentScale
|
|
spacing: Style.marginSmall * scaling * contentScale
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
|
|
// Gauge with percentage label placed inside the open gap (right side)
|
|
Item {
|
|
id: gaugeWrap
|
|
anchors.verticalCenter: innerRow.verticalCenter
|
|
width: 68 * scaling * contentScale
|
|
height: 68 * scaling * contentScale
|
|
|
|
Canvas {
|
|
id: gauge
|
|
anchors.fill: parent
|
|
renderStrategy: Canvas.Cooperative
|
|
onPaint: {
|
|
const ctx = getContext("2d")
|
|
const w = width, h = height
|
|
const cx = w / 2, cy = h / 2
|
|
const r = Math.min(w, h) / 2 - 5 * root.scaling * contentScale
|
|
// 240° arc with a 120° gap centered on the right side
|
|
// Start at 60° and end at 300° → balanced right-side opening
|
|
const start = Math.PI / 3
|
|
const endBg = Math.PI * 5 / 3
|
|
ctx.reset()
|
|
ctx.lineWidth = 6 * root.scaling * contentScale
|
|
// Track uses backgroundPrimary for stronger contrast
|
|
ctx.strokeStyle = Colors.backgroundPrimary
|
|
ctx.beginPath()
|
|
ctx.arc(cx, cy, r, start, endBg)
|
|
ctx.stroke()
|
|
// Value arc
|
|
const ratio = Math.max(0, Math.min(1, root.value / 100))
|
|
const end = start + (endBg - start) * ratio
|
|
ctx.strokeStyle = Colors.accentPrimary
|
|
ctx.beginPath()
|
|
ctx.arc(cx, cy, r, start, end)
|
|
ctx.stroke()
|
|
}
|
|
}
|
|
|
|
// Percent centered in the circle
|
|
Text {
|
|
id: valueLabel
|
|
anchors.centerIn: parent
|
|
text: `${Math.round(root.value)}${root.suffix}`
|
|
font.pointSize: Style.fontSizeMedium * scaling * contentScale
|
|
color: Colors.textPrimary
|
|
horizontalAlignment: Text.AlignHCenter
|
|
}
|
|
|
|
// Tiny circular badge for the icon, inside the right-side gap
|
|
Rectangle {
|
|
id: iconBadge
|
|
width: 22 * scaling * contentScale
|
|
height: width
|
|
radius: width / 2
|
|
color: Colors.backgroundPrimary
|
|
border.color: Colors.accentPrimary
|
|
border.width: Math.max(1, Style.borderThin * scaling)
|
|
anchors.right: parent.right
|
|
anchors.bottom: parent.bottom
|
|
anchors.rightMargin: 4 * scaling * contentScale
|
|
anchors.bottomMargin: 4 * scaling * contentScale
|
|
|
|
Text {
|
|
anchors.centerIn: parent
|
|
text: root.icon
|
|
font.family: "Material Symbols Outlined"
|
|
font.pointSize: Style.fontSizeLarge * scaling * contentScale
|
|
color: Colors.accentPrimary
|
|
horizontalAlignment: Text.AlignHCenter
|
|
verticalAlignment: Text.AlignVCenter
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|