feat: improve dash perf network card
This commit is contained in:
2 * r + 2 * t
parent
430f9ddd1c
commit
9fefb53440
3 changed files with 200 additions and 203 deletions
|
|
@ -116,8 +116,7 @@ Item {
|
||||||
|
|
||||||
NetworkCard {
|
NetworkCard {
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
Layout.minimumWidth: 200
|
Layout.fillHeight: true
|
||||||
Layout.preferredHeight: 220
|
|
||||||
visible: Config.dashboard.performance.showNetwork
|
visible: Config.dashboard.performance.showNetwork
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -252,205 +251,4 @@ Item {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
component CardHeader: RowLayout {
|
|
||||||
property string icon
|
|
||||||
property string title
|
|
||||||
property color accentColor: Colours.palette.m3primary
|
|
||||||
|
|
||||||
Layout.fillWidth: true
|
|
||||||
spacing: Tokens.spacing.small
|
|
||||||
|
|
||||||
MaterialIcon {
|
|
||||||
text: parent.icon
|
|
||||||
fill: 1
|
|
||||||
color: parent.accentColor
|
|
||||||
fontStyle: Tokens.font.icon.size(Tokens.spacing.large).build()
|
|
||||||
}
|
|
||||||
|
|
||||||
StyledText {
|
|
||||||
Layout.fillWidth: true
|
|
||||||
text: parent.title
|
|
||||||
font: Tokens.font.body.medium
|
|
||||||
elide: Text.ElideRight
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
component NetworkCard: StyledRect {
|
|
||||||
id: networkCard
|
|
||||||
|
|
||||||
property color accentColor: Colours.palette.m3primary
|
|
||||||
|
|
||||||
color: Colours.tPalette.m3surfaceContainer
|
|
||||||
radius: Tokens.rounding.extraLarge
|
|
||||||
clip: true
|
|
||||||
|
|
||||||
Ref {
|
|
||||||
service: NetworkUsage
|
|
||||||
}
|
|
||||||
|
|
||||||
ColumnLayout {
|
|
||||||
anchors.fill: parent
|
|
||||||
anchors.margins: Tokens.padding.large
|
|
||||||
spacing: Tokens.spacing.small
|
|
||||||
|
|
||||||
CardHeader {
|
|
||||||
icon: "swap_vert"
|
|
||||||
title: qsTr("Network")
|
|
||||||
accentColor: networkCard.accentColor
|
|
||||||
}
|
|
||||||
|
|
||||||
// Sparkline graph
|
|
||||||
Item {
|
|
||||||
Layout.fillWidth: true
|
|
||||||
Layout.fillHeight: true
|
|
||||||
|
|
||||||
SparklineItem {
|
|
||||||
id: sparkline
|
|
||||||
|
|
||||||
property real targetMax: 1024
|
|
||||||
property real smoothMax: targetMax
|
|
||||||
|
|
||||||
anchors.fill: parent
|
|
||||||
line1: NetworkUsage.uploadBuffer // qmllint disable missing-type
|
|
||||||
line1Color: Colours.palette.m3secondary
|
|
||||||
line1FillAlpha: 0.15
|
|
||||||
line2: NetworkUsage.downloadBuffer // qmllint disable missing-type
|
|
||||||
line2Color: Colours.palette.m3tertiary
|
|
||||||
line2FillAlpha: 0.2
|
|
||||||
maxValue: smoothMax
|
|
||||||
historyLength: NetworkUsage.historyLength
|
|
||||||
|
|
||||||
Connections {
|
|
||||||
function onValuesChanged(): void {
|
|
||||||
sparkline.targetMax = Math.max(NetworkUsage.downloadBuffer.maximum, NetworkUsage.uploadBuffer.maximum, 1024);
|
|
||||||
slideAnim.restart();
|
|
||||||
}
|
|
||||||
|
|
||||||
target: NetworkUsage.downloadBuffer
|
|
||||||
}
|
|
||||||
|
|
||||||
NumberAnimation {
|
|
||||||
id: slideAnim
|
|
||||||
|
|
||||||
target: sparkline
|
|
||||||
property: "slideProgress"
|
|
||||||
from: 0
|
|
||||||
to: 1
|
|
||||||
duration: GlobalConfig.dashboard.resourceUpdateInterval
|
|
||||||
}
|
|
||||||
|
|
||||||
Behavior on smoothMax {
|
|
||||||
Anim {
|
|
||||||
type: Anim.StandardLarge
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// "No data" placeholder
|
|
||||||
StyledText {
|
|
||||||
anchors.centerIn: parent
|
|
||||||
text: qsTr("Collecting data...")
|
|
||||||
font: Tokens.font.body.small
|
|
||||||
color: Colours.palette.m3onSurfaceVariant
|
|
||||||
visible: NetworkUsage.downloadBuffer.count < 2
|
|
||||||
opacity: 0.6
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Download row
|
|
||||||
RowLayout {
|
|
||||||
Layout.fillWidth: true
|
|
||||||
spacing: Tokens.spacing.medium
|
|
||||||
|
|
||||||
MaterialIcon {
|
|
||||||
text: "download"
|
|
||||||
color: Colours.palette.m3tertiary
|
|
||||||
fontStyle: Tokens.font.icon.medium
|
|
||||||
}
|
|
||||||
|
|
||||||
StyledText {
|
|
||||||
text: qsTr("Download")
|
|
||||||
font: Tokens.font.body.small
|
|
||||||
color: Colours.palette.m3onSurfaceVariant
|
|
||||||
}
|
|
||||||
|
|
||||||
Item {
|
|
||||||
Layout.fillWidth: true
|
|
||||||
}
|
|
||||||
|
|
||||||
StyledText {
|
|
||||||
text: {
|
|
||||||
const fmt = NetworkUsage.formatBytes(NetworkUsage.downloadSpeed ?? 0);
|
|
||||||
return fmt ? `${fmt.value.toFixed(1)} ${fmt.unit}` : "0.0 B/s";
|
|
||||||
}
|
|
||||||
font: Tokens.font.body.builders.medium.weight(Font.Medium).build()
|
|
||||||
color: Colours.palette.m3tertiary
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Upload row
|
|
||||||
RowLayout {
|
|
||||||
Layout.fillWidth: true
|
|
||||||
spacing: Tokens.spacing.medium
|
|
||||||
|
|
||||||
MaterialIcon {
|
|
||||||
text: "upload"
|
|
||||||
color: Colours.palette.m3secondary
|
|
||||||
fontStyle: Tokens.font.icon.medium
|
|
||||||
}
|
|
||||||
|
|
||||||
StyledText {
|
|
||||||
text: qsTr("Upload")
|
|
||||||
font: Tokens.font.body.small
|
|
||||||
color: Colours.palette.m3onSurfaceVariant
|
|
||||||
}
|
|
||||||
|
|
||||||
Item {
|
|
||||||
Layout.fillWidth: true
|
|
||||||
}
|
|
||||||
|
|
||||||
StyledText {
|
|
||||||
text: {
|
|
||||||
const fmt = NetworkUsage.formatBytes(NetworkUsage.uploadSpeed ?? 0);
|
|
||||||
return fmt ? `${fmt.value.toFixed(1)} ${fmt.unit}` : "0.0 B/s";
|
|
||||||
}
|
|
||||||
font: Tokens.font.body.builders.medium.weight(Font.Medium).build()
|
|
||||||
color: Colours.palette.m3secondary
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Session totals
|
|
||||||
RowLayout {
|
|
||||||
Layout.fillWidth: true
|
|
||||||
spacing: Tokens.spacing.medium
|
|
||||||
|
|
||||||
MaterialIcon {
|
|
||||||
text: "history"
|
|
||||||
color: Colours.palette.m3onSurfaceVariant
|
|
||||||
fontStyle: Tokens.font.icon.medium
|
|
||||||
}
|
|
||||||
|
|
||||||
StyledText {
|
|
||||||
text: qsTr("Total")
|
|
||||||
font: Tokens.font.body.small
|
|
||||||
color: Colours.palette.m3onSurfaceVariant
|
|
||||||
}
|
|
||||||
|
|
||||||
Item {
|
|
||||||
Layout.fillWidth: true
|
|
||||||
}
|
|
||||||
|
|
||||||
StyledText {
|
|
||||||
text: {
|
|
||||||
const down = NetworkUsage.formatBytesTotal(NetworkUsage.downloadTotal ?? 0);
|
|
||||||
const up = NetworkUsage.formatBytesTotal(NetworkUsage.uploadTotal ?? 0);
|
|
||||||
return (down && up) ? `↓${down.value.toFixed(1)}${down.unit} ↑${up.value.toFixed(1)}${up.unit}` : "↓0.0B ↑0.0B";
|
|
||||||
}
|
|
||||||
font: Tokens.font.body.small
|
|
||||||
color: Colours.palette.m3onSurfaceVariant
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
197
modules/dashboard/performance/NetworkCard.qml
Normal file
197
modules/dashboard/performance/NetworkCard.qml
Normal file
|
|
@ -0,0 +1,197 @@
|
||||||
|
import QtQuick
|
||||||
|
import QtQuick.Layouts
|
||||||
|
import Caelestia.Config
|
||||||
|
import Caelestia.Internal
|
||||||
|
import qs.components
|
||||||
|
import qs.components.misc
|
||||||
|
import qs.services
|
||||||
|
|
||||||
|
StyledRect {
|
||||||
|
id: root
|
||||||
|
|
||||||
|
color: Colours.tPalette.m3surfaceContainer
|
||||||
|
radius: Tokens.rounding.extraLarge
|
||||||
|
|
||||||
|
implicitWidth: Tokens.sizes.dashboard.perfNetworkCardWidth
|
||||||
|
implicitHeight: Tokens.sizes.dashboard.perfNetworkCardHeight
|
||||||
|
|
||||||
|
Ref {
|
||||||
|
service: NetworkUsage
|
||||||
|
}
|
||||||
|
|
||||||
|
ColumnLayout {
|
||||||
|
id: layout
|
||||||
|
|
||||||
|
anchors.fill: parent
|
||||||
|
anchors.margins: Tokens.padding.large
|
||||||
|
anchors.bottomMargin: Tokens.padding.medium
|
||||||
|
spacing: 0
|
||||||
|
|
||||||
|
RowLayout {
|
||||||
|
spacing: Tokens.spacing.small
|
||||||
|
|
||||||
|
MaterialIcon {
|
||||||
|
text: "swap_vert"
|
||||||
|
color: Colours.palette.m3primary
|
||||||
|
fontStyle: Tokens.font.icon.medium
|
||||||
|
}
|
||||||
|
|
||||||
|
StyledText {
|
||||||
|
text: qsTr("Network")
|
||||||
|
font: Tokens.font.title.medium
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sparkline graph
|
||||||
|
Item {
|
||||||
|
Layout.topMargin: Tokens.spacing.medium
|
||||||
|
Layout.bottomMargin: Tokens.spacing.small
|
||||||
|
Layout.fillWidth: true
|
||||||
|
Layout.fillHeight: true
|
||||||
|
|
||||||
|
SparklineItem {
|
||||||
|
id: sparkline
|
||||||
|
|
||||||
|
property real targetMax: 1024
|
||||||
|
property real smoothMax: targetMax
|
||||||
|
|
||||||
|
anchors.fill: parent
|
||||||
|
line1: NetworkUsage.uploadBuffer // qmllint disable missing-type
|
||||||
|
line1Color: Colours.palette.m3secondary
|
||||||
|
line1FillAlpha: 0.15
|
||||||
|
line2: NetworkUsage.downloadBuffer // qmllint disable missing-type
|
||||||
|
line2Color: Colours.palette.m3tertiary
|
||||||
|
line2FillAlpha: 0.2
|
||||||
|
maxValue: smoothMax
|
||||||
|
historyLength: NetworkUsage.historyLength
|
||||||
|
|
||||||
|
Connections {
|
||||||
|
function onValuesChanged(): void {
|
||||||
|
sparkline.targetMax = Math.max(NetworkUsage.downloadBuffer.maximum, NetworkUsage.uploadBuffer.maximum, 1024);
|
||||||
|
slideAnim.restart();
|
||||||
|
}
|
||||||
|
|
||||||
|
target: NetworkUsage.downloadBuffer
|
||||||
|
}
|
||||||
|
|
||||||
|
NumberAnimation {
|
||||||
|
id: slideAnim
|
||||||
|
|
||||||
|
target: sparkline
|
||||||
|
property: "slideProgress"
|
||||||
|
from: 0
|
||||||
|
to: 1
|
||||||
|
easing.type: Easing.Linear
|
||||||
|
duration: GlobalConfig.dashboard.resourceUpdateInterval
|
||||||
|
}
|
||||||
|
|
||||||
|
Behavior on smoothMax {
|
||||||
|
Anim {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// "Collecting data" placeholder
|
||||||
|
StyledText {
|
||||||
|
anchors.centerIn: parent
|
||||||
|
text: qsTr("Collecting data...")
|
||||||
|
font: Tokens.font.body.small
|
||||||
|
color: Colours.palette.m3outline
|
||||||
|
visible: NetworkUsage.downloadBuffer.count < 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Download row
|
||||||
|
RowLayout {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
spacing: Tokens.spacing.small
|
||||||
|
|
||||||
|
MaterialIcon {
|
||||||
|
text: "download"
|
||||||
|
color: Colours.palette.m3tertiary
|
||||||
|
fontStyle: Tokens.font.icon.medium
|
||||||
|
}
|
||||||
|
|
||||||
|
StyledText {
|
||||||
|
text: qsTr("Download")
|
||||||
|
font: Tokens.font.body.small
|
||||||
|
color: Colours.palette.m3onSurfaceVariant
|
||||||
|
}
|
||||||
|
|
||||||
|
Item {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
}
|
||||||
|
|
||||||
|
StyledText {
|
||||||
|
text: {
|
||||||
|
const fmt = NetworkUsage.formatBytes(NetworkUsage.downloadSpeed ?? 0);
|
||||||
|
return fmt ? `${fmt.value.toFixed(1)} ${fmt.unit}` : "0.0 B/s";
|
||||||
|
}
|
||||||
|
font: Tokens.font.body.builders.medium.weight(Font.Medium).build()
|
||||||
|
color: Colours.palette.m3tertiary
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Upload row
|
||||||
|
RowLayout {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
spacing: Tokens.spacing.small
|
||||||
|
|
||||||
|
MaterialIcon {
|
||||||
|
text: "upload"
|
||||||
|
color: Colours.palette.m3secondary
|
||||||
|
fontStyle: Tokens.font.icon.medium
|
||||||
|
}
|
||||||
|
|
||||||
|
StyledText {
|
||||||
|
text: qsTr("Upload")
|
||||||
|
font: Tokens.font.body.small
|
||||||
|
color: Colours.palette.m3onSurfaceVariant
|
||||||
|
}
|
||||||
|
|
||||||
|
Item {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
}
|
||||||
|
|
||||||
|
StyledText {
|
||||||
|
text: {
|
||||||
|
const fmt = NetworkUsage.formatBytes(NetworkUsage.uploadSpeed ?? 0);
|
||||||
|
return fmt ? `${fmt.value.toFixed(1)} ${fmt.unit}` : "0.0 B/s";
|
||||||
|
}
|
||||||
|
font: Tokens.font.body.builders.medium.weight(Font.Medium).build()
|
||||||
|
color: Colours.palette.m3secondary
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Session totals
|
||||||
|
RowLayout {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
spacing: Tokens.spacing.small
|
||||||
|
|
||||||
|
MaterialIcon {
|
||||||
|
text: "history"
|
||||||
|
color: Colours.palette.m3onSurfaceVariant
|
||||||
|
fontStyle: Tokens.font.icon.medium
|
||||||
|
}
|
||||||
|
|
||||||
|
StyledText {
|
||||||
|
text: qsTr("Total")
|
||||||
|
font: Tokens.font.body.small
|
||||||
|
color: Colours.palette.m3onSurfaceVariant
|
||||||
|
}
|
||||||
|
|
||||||
|
Item {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
}
|
||||||
|
|
||||||
|
StyledText {
|
||||||
|
text: {
|
||||||
|
const down = NetworkUsage.formatBytesTotal(NetworkUsage.downloadTotal ?? 0);
|
||||||
|
const up = NetworkUsage.formatBytesTotal(NetworkUsage.uploadTotal ?? 0);
|
||||||
|
return (down && up) ? `↓${down.value.toFixed(1)}${down.unit} ↑${up.value.toFixed(1)}${up.unit}` : "↓0.0B ↑0.0B";
|
||||||
|
}
|
||||||
|
font: Tokens.font.body.small
|
||||||
|
color: Colours.palette.m3onSurfaceVariant
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -192,6 +192,8 @@ class DashboardTokens : public ConfigObject {
|
||||||
CONFIG_PROPERTY(int, perfHeroCardWidth, 400)
|
CONFIG_PROPERTY(int, perfHeroCardWidth, 400)
|
||||||
CONFIG_PROPERTY(int, perfUsageShapeSize, 100)
|
CONFIG_PROPERTY(int, perfUsageShapeSize, 100)
|
||||||
CONFIG_PROPERTY(int, perfStorageTextWidth, 160)
|
CONFIG_PROPERTY(int, perfStorageTextWidth, 160)
|
||||||
|
CONFIG_PROPERTY(int, perfNetworkCardWidth, 280)
|
||||||
|
CONFIG_PROPERTY(int, perfNetworkCardHeight, 220)
|
||||||
|
|
||||||
public:
|
public:
|
||||||
explicit DashboardTokens(QObject* parent = nullptr)
|
explicit DashboardTokens(QObject* parent = nullptr)
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue