124 lines
3.5 KiB
QML
124 lines
3.5 KiB
QML
import QtQuick
|
|
import QtQuick.Controls
|
|
import QtQuick.Layouts
|
|
import TactileIPC 1.0
|
|
import LiveTrend 1.0
|
|
|
|
Rectangle {
|
|
id: root
|
|
width: 260
|
|
height: 180
|
|
radius: 10
|
|
color: Backend.lightMode ? "#FFFFFF" : "#2C2C2C"
|
|
border.color: Backend.lightMode ? "#E6E6E6" : "#3A3A3A"
|
|
border.width: 1
|
|
|
|
property alias plot: plot
|
|
property string title: "Live Trend"
|
|
|
|
property bool follow: true
|
|
property color accentColor: Backend.lightMode ? "#39D353" : "#5BE37A"
|
|
property color textColor: Backend.lightMode ? "#2B2B2B" : "#E0E0E0"
|
|
property color plotBackground: Backend.lightMode ? "#FFFFFF" : "#1F1F1F"
|
|
property color gridColor: Backend.lightMode ? Qt.rgba(0, 0, 0, 0.08) : Qt.rgba(1, 1, 1, 0.08)
|
|
property color plotTextColor: Backend.lightMode ? Qt.rgba(0, 0, 0, 0.65) : Qt.rgba(1, 1, 1, 0.65)
|
|
|
|
ColumnLayout {
|
|
anchors.fill: parent
|
|
anchors.margins: 10
|
|
spacing: 6
|
|
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
spacing: 8
|
|
|
|
Rectangle {
|
|
width: 8
|
|
height: 8
|
|
radius: 2
|
|
color: root.accentColor
|
|
Layout.alignment: Qt.AlignVCenter
|
|
}
|
|
|
|
Label {
|
|
text: root.title
|
|
font.pixelSize: 14
|
|
color: root.textColor
|
|
Layout.fillWidth: true
|
|
elide: Text.ElideRight
|
|
}
|
|
|
|
ToolButton {
|
|
text: root.follow ? "▲" : "↺"
|
|
font.pixelSize: 14
|
|
onClicked: {
|
|
root.follow = true
|
|
plot.follow = true
|
|
}
|
|
}
|
|
}
|
|
|
|
// Plot
|
|
Rectangle {
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
radius: 8
|
|
color: root.plotBackground
|
|
|
|
SparklinePlot {
|
|
id: plot
|
|
anchors.fill: parent
|
|
leftPadding: 40
|
|
rightPadding: 6
|
|
topPadding: 8
|
|
bottomPadding: 18
|
|
|
|
yTickCount: 5
|
|
lineColor: root.accentColor
|
|
gridColor: root.gridColor
|
|
textColor: root.plotTextColor
|
|
|
|
viewCount: 5
|
|
follow: root.follow
|
|
|
|
// 60fps
|
|
Timer {
|
|
interval: 16
|
|
running: true
|
|
repeat: true
|
|
onTriggered: plot.update()
|
|
}
|
|
|
|
DragHandler {
|
|
onActiveChanged: if (active) {
|
|
root.follow = false
|
|
plot.follow = false
|
|
}
|
|
onTranslationChanged: (t) => {
|
|
let move = Math.round(-t.x / 12)
|
|
if (move !== 0) {
|
|
plot.viewStart = Math.max(0, plot.viewStart + move)
|
|
}
|
|
}
|
|
}
|
|
|
|
WheelHandler {
|
|
onWheel: (w) => {
|
|
root.follow = false
|
|
plot.follow = false
|
|
let factor = w.angleDelta.y > 0 ? 0.85 : 1.15
|
|
plot.viewCount = Math.max(10, Math.min(2000000, Math.floor(plot.viewCount * factor)))
|
|
}
|
|
}
|
|
|
|
TapHandler {
|
|
onDoubleTapped: {
|
|
root.follow = true
|
|
plot.follow = true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|