timka123
77b26757bf
- Refactored TimerPage component to improve layout and user experience. - Updated theme configuration to utilize design tokens for better maintainability. - Introduced new tokens for colors and typography to align with design principles. - Simplified state management and improved timer functionality. - Enhanced accessibility and responsiveness of UI elements.
83 lines
2.7 KiB
QML
83 lines
2.7 KiB
QML
// Pomodoros per day: magnitude over time, so bars, one hue, baseline at zero.
|
|
// The goal line is the only reference mark; days that cleared it take a darker
|
|
// step of the same ramp, which keeps "did I hit it" readable without a second
|
|
// colour.
|
|
import QtQuick
|
|
import QtQuick.Controls
|
|
import QtQuick.Layouts
|
|
|
|
import ".."
|
|
|
|
Item {
|
|
id: chart
|
|
property var days: []
|
|
property int goal: 8
|
|
property int barHeight: 108
|
|
|
|
Layout.fillWidth: true
|
|
implicitHeight: barHeight + 16
|
|
|
|
readonly property int maxValue: {
|
|
var top = goal
|
|
for (var i = 0; i < days.length; i++) top = Math.max(top, days[i].pomodoros)
|
|
return Math.max(top, 1)
|
|
}
|
|
|
|
Rectangle {
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
y: chart.barHeight - (chart.goal / chart.maxValue) * chart.barHeight
|
|
height: 1
|
|
color: Theme.rule
|
|
visible: chart.goal > 0
|
|
}
|
|
|
|
RowLayout {
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
height: chart.barHeight
|
|
spacing: 2
|
|
|
|
Repeater {
|
|
model: chart.days
|
|
delegate: Item {
|
|
required property var modelData
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
|
|
Rectangle {
|
|
anchors.bottom: parent.bottom
|
|
width: parent.width
|
|
height: Math.max(modelData.pomodoros > 0
|
|
? (modelData.pomodoros / chart.maxValue) * chart.barHeight : 2, 2)
|
|
radius: 3
|
|
color: modelData.pomodoros === 0
|
|
? Theme.rule
|
|
: (modelData.goal_met ? Theme.sequential[4] : Theme.sequential[2])
|
|
|
|
ToolTip.visible: hover.hovered
|
|
ToolTip.text: modelData.date + " · " + modelData.pomodoros
|
|
+ " pomodoros · " + modelData.focus_minutes + " min"
|
|
HoverHandler { id: hover }
|
|
Behavior on height { NumberAnimation { duration: 220 } }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
RowLayout {
|
|
anchors.bottom: parent.bottom
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
Label {
|
|
text: chart.days.length ? chart.days[0].date.substring(5) : ""
|
|
font.pixelSize: 10; color: Theme.faint; font.family: Theme.sansFamily
|
|
}
|
|
Item { Layout.fillWidth: true }
|
|
Label {
|
|
text: chart.days.length ? chart.days[chart.days.length - 1].date.substring(5) : ""
|
|
font.pixelSize: 10; color: Theme.faint; font.family: Theme.sansFamily
|
|
}
|
|
}
|
|
}
|