b723eccc78
property real fontSizeXS: 9 property real fontSizeS: 10 property real fontSizeM: 11 property real fontSizeL: 13 property real fontSizeXL: 16 property real fontSizeXXL: 18 property real fontSizeXXXL: 24
111 lines
3.6 KiB
QML
111 lines
3.6 KiB
QML
import QtQuick
|
|
import qs.Commons
|
|
import qs.Services
|
|
|
|
// Compact circular statistic display used in the SidePanel
|
|
Rectangle {
|
|
id: root
|
|
|
|
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 ? Color.transparent : Color.mSurface
|
|
radius: Style.radiusS * scaling
|
|
border.color: flat ? Color.transparent : Color.mSurfaceVariant
|
|
border.width: flat ? 0 : Math.max(1, Style.borderS * scaling)
|
|
clip: true
|
|
|
|
// Repaint gauge when the bound value changes
|
|
onValueChanged: gauge.requestPaint()
|
|
|
|
Row {
|
|
id: innerRow
|
|
anchors.fill: parent
|
|
anchors.margins: Style.marginS * scaling * contentScale
|
|
spacing: Style.marginS * 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 * 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 * scaling * contentScale
|
|
// Track uses surfaceVariant for stronger contrast
|
|
ctx.strokeStyle = Color.mSurface
|
|
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 = Color.mPrimary
|
|
ctx.beginPath()
|
|
ctx.arc(cx, cy, r, start, end)
|
|
ctx.stroke()
|
|
}
|
|
}
|
|
|
|
// Percent centered in the circle
|
|
Text {
|
|
id: valueLabel
|
|
anchors.centerIn: parent
|
|
text: `${root.value}${root.suffix}`
|
|
font.pointSize: Style.fontSizeM * scaling * contentScale
|
|
font.weight: Style.fontWeightBold
|
|
color: Color.mOnSurface
|
|
horizontalAlignment: Text.AlignHCenter
|
|
}
|
|
|
|
// Tiny circular badge for the icon, inside the right-side gap
|
|
Rectangle {
|
|
id: iconBadge
|
|
width: 28 * scaling * contentScale
|
|
height: width
|
|
radius: width / 2
|
|
color: Color.mSurface
|
|
// border.color: Color.mPrimary
|
|
// border.width: Math.max(1, Style.borderS * scaling)
|
|
anchors.right: parent.right
|
|
anchors.top: parent.top
|
|
anchors.rightMargin: -6 * scaling * contentScale
|
|
anchors.topMargin: Style.marginXXS * scaling * contentScale
|
|
|
|
NIcon {
|
|
anchors.centerIn: parent
|
|
text: root.icon
|
|
font.pointSize: Style.fontSizeLargeXL * scaling * contentScale
|
|
color: Color.mOnSurface
|
|
horizontalAlignment: Text.AlignHCenter
|
|
verticalAlignment: Text.AlignVCenter
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|