188 lines
3.6 KiB
QML
188 lines
3.6 KiB
QML
pragma ComponentBehavior: Bound
|
|
|
|
import QtQuick
|
|
import QtQuick.Layouts
|
|
import ZShell.Config
|
|
import ZShell.Components
|
|
import ZShell.Services
|
|
import qs.Components
|
|
import qs.Services
|
|
|
|
Item {
|
|
id: root
|
|
|
|
required property int radius
|
|
|
|
implicitHeight: layout.implicitHeight
|
|
|
|
ServiceRef {
|
|
service: Cpu
|
|
}
|
|
|
|
ServiceRef {
|
|
service: Memory
|
|
}
|
|
|
|
RowLayout {
|
|
id: layout
|
|
anchors.fill: parent
|
|
spacing: Tokens.spacing.medium
|
|
|
|
UsageCard {
|
|
accent: Colors.palette.m3primary
|
|
buffer: ResourceUsage.cpuBuffer
|
|
icon: "memory"
|
|
label: qsTr("CPU")
|
|
values: ResourceUsage.cpuInfo
|
|
}
|
|
|
|
UsageCard {
|
|
accent: Colors.palette.m3tertiary
|
|
buffer: ResourceUsage.memoryBuffer
|
|
icon: "memory_alt"
|
|
label: qsTr("Memory")
|
|
values: ResourceUsage.memoryInfo
|
|
}
|
|
}
|
|
|
|
component UsageCard: CustomRect {
|
|
id: card
|
|
|
|
property color accent
|
|
required property var buffer
|
|
property string icon
|
|
property string label
|
|
property list<var> values
|
|
|
|
color: Colors.tPalette.m3surfaceContainer
|
|
radius: root.radius
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
implicitHeight: mainLayout.implicitHeight + mainLayout.anchors.margins * 2
|
|
|
|
ColumnLayout {
|
|
id: mainLayout
|
|
anchors.fill: parent
|
|
anchors.margins: Tokens.padding.large
|
|
spacing: 0
|
|
|
|
RowLayout {
|
|
spacing: Tokens.spacing.small
|
|
|
|
MaterialIcon {
|
|
color: card.accent
|
|
text: card.icon
|
|
}
|
|
|
|
CustomText {
|
|
text: card.label
|
|
}
|
|
}
|
|
|
|
Item {
|
|
id: graphWrapper
|
|
Layout.fillHeight: true
|
|
Layout.fillWidth: true
|
|
implicitHeight: infoColumn.implicitHeight
|
|
|
|
Item {
|
|
anchors.left: parent.left
|
|
anchors.top: parent.top
|
|
anchors.bottom: parent.bottom
|
|
anchors.right: infoColumn.left
|
|
|
|
SparklineItem {
|
|
id: sparkline
|
|
|
|
anchors.fill: parent
|
|
historyLength: ResourceUsage.historyLength
|
|
line1: card.buffer
|
|
line1Color: card.accent
|
|
line1FillAlpha: 0.15
|
|
maxValue: 1.0
|
|
slideProgress: 1
|
|
|
|
Connections {
|
|
function onValuesChanged(): void {
|
|
slideAnim.restart();
|
|
}
|
|
|
|
target: card.buffer
|
|
}
|
|
|
|
NumberAnimation {
|
|
id: slideAnim
|
|
|
|
duration: Config.dashboard.resourceUpdateInterval
|
|
easing.type: Easing.Linear
|
|
from: 0
|
|
property: "slideProgress"
|
|
target: sparkline
|
|
to: 1
|
|
}
|
|
}
|
|
|
|
// "Collecting data" placeholder
|
|
CustomText {
|
|
anchors.centerIn: parent
|
|
color: Colors.palette.m3outline
|
|
text: qsTr("Collecting data...")
|
|
visible: card.buffer.count < 2
|
|
}
|
|
}
|
|
|
|
ColumnLayout {
|
|
id: infoColumn
|
|
anchors.right: parent.right
|
|
anchors.bottom: parent.bottom
|
|
width: {
|
|
const prefWidth = graphWrapper.width / 3;
|
|
const minWidth = graphWrapper.width / 4;
|
|
if (prefWidth < implicitWidth)
|
|
return implicitWidth;
|
|
else if (prefWidth >= implicitWidth * 2)
|
|
return minWidth;
|
|
else
|
|
return prefWidth;
|
|
}
|
|
|
|
Repeater {
|
|
model: card.values
|
|
|
|
Item {
|
|
id: moreInfo
|
|
|
|
required property var modelData
|
|
|
|
Layout.leftMargin: Tokens.spacing.medium
|
|
Layout.fillWidth: true
|
|
implicitWidth: label.implicitWidth + value.implicitWidth + label.anchors.margins * 2
|
|
implicitHeight: label.implicitHeight
|
|
|
|
CustomText {
|
|
id: label
|
|
|
|
anchors.left: parent.left
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
|
|
color: Colors.palette.m3onSurfaceVariant
|
|
text: moreInfo.modelData.label
|
|
}
|
|
|
|
CustomText {
|
|
id: value
|
|
|
|
anchors.right: parent.right
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
|
|
color: card.accent
|
|
text: moreInfo.modelData.value
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|