Commit 20bde5a0 authored by David Redondo's avatar David Redondo 🏎
Browse files

Add a legend at the bottom of the TrafficMonitor

Makes it easier to figure out which color represents what since we had to remove
the colors from the arrows
parent e51d9c17
......@@ -19,94 +19,117 @@
*/
import QtQuick 2.4
import QtQuick.Layouts 1.4
import org.kde.kcoreaddons 1.0 as KCoreAddons
import org.kde.quickcharts 1.0 as QuickCharts
import org.kde.quickcharts.controls 1.0 as QuickChartControls
import org.kde.kirigami 2.12 as Kirigami
import org.kde.plasma.components 3.0 as PlasmaComponents3
import org.kde.plasma.core 2.0 as PlasmaCore
Item {
ColumnLayout {
property alias downloadSpeed: download.value
property alias uploadSpeed: upload.value
height: visible ? plotter.height + plotter.anchors.topMargin + units.smallSpacing : 0
spacing: PlasmaCore.Units.largeSpacing
QuickCharts.AxisLabels {
anchors {
right: plotter.left
rightMargin: units.smallSpacing
top: plotter.top
bottom: plotter.bottom
}
constrainToBounds: false
direction: QuickCharts.AxisLabels.VerticalBottomTop
delegate: PlasmaComponents3.Label {
text: KCoreAddons.Format.formatByteSize(QuickCharts.AxisLabels.label) + i18n("/s")
font.pointSize: PlasmaCore.Theme.smallestFont.pointSize
}
source: QuickCharts.ChartAxisSource {
chart: plotter
axis: QuickCharts.ChartAxisSource.YAxis
itemCount: 5
}
}
Item {
Layout.fillWidth: true
implicitHeight: plotter.height + speedMetrics.height
QuickCharts.GridLines {
anchors.fill: plotter
direction: QuickCharts.GridLines.Vertical
minor.visible: false
major.count: 3
major.lineWidth: 1
// Same calculation as Kirigami Separator
major.color: Kirigami.ColorUtils.linearInterpolation(PlasmaCore.Theme.backgroundColor, PlasmaCore.Theme.textColor, 0.2)
}
QuickCharts.LineChart {
id: plotter
anchors {
left: parent.left
leftMargin: speedMetrics.width + units.smallSpacing * 2
right: parent.right
top: parent.top
// Align plotter lines with labels.
topMargin: speedMetrics.height / 2 + units.smallSpacing
}
height: units.gridUnit * 8
smooth: true
direction: QuickCharts.XYChart.ZeroAtEnd
yRange {
minimum: 100 * 1024
increment: 100 * 1024
}
valueSources: [
QuickCharts.ValueHistorySource {
id: txSpeed
maximumHistory: 40
},
QuickCharts.ValueHistorySource {
id: rxSpeed
maximumHistory: 40
QuickCharts.AxisLabels {
anchors {
right: plotter.left
rightMargin: units.smallSpacing
top: plotter.top
bottom: plotter.bottom
}
constrainToBounds: false
direction: QuickCharts.AxisLabels.VerticalBottomTop
delegate: PlasmaComponents3.Label {
text: KCoreAddons.Format.formatByteSize(QuickCharts.AxisLabels.label) + i18n("/s")
font.pointSize: PlasmaCore.Theme.smallestFont.pointSize
}
source: QuickCharts.ChartAxisSource {
chart: plotter
axis: QuickCharts.ChartAxisSource.YAxis
itemCount: 5
}
]
colorSource: QuickCharts.ArraySource {
array: colors.colors.reverse()
}
fillColorSource: QuickCharts.ArraySource {
array: colors.colors.reverse().map(color => Qt.lighter(color, 1.5))
QuickCharts.GridLines {
anchors.fill: plotter
direction: QuickCharts.GridLines.Vertical
minor.visible: false
major.count: 3
major.lineWidth: 1
// Same calculation as Kirigami Separator
major.color: Kirigami.ColorUtils.linearInterpolation(PlasmaCore.Theme.backgroundColor, PlasmaCore.Theme.textColor, 0.2)
}
QuickCharts.ColorGradientSource {
QuickCharts.LineChart {
id: plotter
anchors {
left: parent.left
leftMargin: speedMetrics.width + units.smallSpacing
right: parent.right
top: parent.top
// Align plotter lines with labels.
topMargin: speedMetrics.height / 2 + units.smallSpacing
}
height: units.gridUnit * 8
smooth: true
direction: QuickCharts.XYChart.ZeroAtEnd
yRange {
minimum: 100 * 1024
increment: 100 * 1024
}
valueSources: [
QuickCharts.ValueHistorySource {
id: upload
maximumHistory: 40
},
QuickCharts.ValueHistorySource {
id: download
maximumHistory: 40
}
]
nameSource: QuickCharts.ArraySource {
array: [i18n("Upload"), i18n("Download")]
}
colorSource: QuickCharts.ArraySource {
array: colors.colors.reverse()
}
fillColorSource: QuickCharts.ArraySource {
array: colors.colors.reverse().map(color => Qt.lighter(color, 1.5))
}
QuickCharts.ColorGradientSource {
id: colors
baseColor: PlasmaCore.Theme.highlightColor
itemCount: 2
}
}
TextMetrics {
id: speedMetrics
font.pointSize: theme.smallestFont.pointSize
// Measure 888.8 KiB/s
text: KCoreAddons.Format.formatByteSize(910131) + i18n("/s")
}
}
TextMetrics {
id: speedMetrics
font.pointSize: theme.smallestFont.pointSize
// Measure 888.8 KiB/s
text: KCoreAddons.Format.formatByteSize(910131) + i18n("/s")
QuickChartControls.Legend {
chart: plotter
Layout.leftMargin: PlasmaCore.Units.smallSpacing
spacing: PlasmaCore.Units.largeSpacing
delegate: RowLayout {
spacing: PlasmaCore.Units.smallSpacing
Rectangle {
color: model.color
width: PlasmaCore.Units.smallSpacing
height: legendLabel.height
}
PlasmaComponents3.Label {
id: legendLabel
font: PlasmaCore.Theme.smallestFont
text: model.name
}
}
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment