aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorArseniy Movshev <dodoradio@outlook.com>2023-05-30 15:55:21 +0100
committerArseniy Movshev <dodoradio@outlook.com>2023-05-30 16:36:08 +0100
commitd6b14767bd7a4de6a29337e0acda9d7beb6f1a19 (patch)
treec8bde84b10e314b400f51bead293e8cb50c5a73d
parente833e0551518ff9afd220ea6cd5fb21875db9fc8 (diff)
Move bar graph into a dedicated component
-rw-r--r--src/graphs/BarGraph.qml98
-rw-r--r--src/main.qml102
-rw-r--r--src/resources.qrc1
3 files changed, 112 insertions, 89 deletions
diff --git a/src/graphs/BarGraph.qml b/src/graphs/BarGraph.qml
new file mode 100644
index 0000000..f5de55f
--- /dev/null
+++ b/src/graphs/BarGraph.qml
@@ -0,0 +1,98 @@
+/*
+ * Copyright (C) 2023 Arseniy Movshev <dodoradio@outlook.com>
+ * 2019 Florent Revest <revestflo@gmail.com>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.15
+import org.asteroid.controls 1.0
+
+Item {
+ id: barGraph
+ anchors.horizontalCenter: parent.horizontalCenter
+ property var valuesArr: []
+ property var labelsArr: []
+ property var maxValue: 0
+ property var divisionsInterval: 0
+ property var divisionsCount: 0
+ function dataLoadingDone() {
+ barsRepeater.model = valuesArr.length
+ labelsRepeater.model = labelsArr.length
+ }
+ Item { // labels column
+ id: markerParent
+ width: parent.width/8
+ height: parent.height
+ anchors {
+ left: parent.left
+ top: barsRow.top
+ bottom: barsRow.bottom
+ }
+ Repeater {
+ model: barGraph.divisionsCount
+ delegate: Label {
+ anchors.left: parent.left
+ text: barGraph.divisionsInterval*index
+ font.pixelSize: Dims.w(5)
+ y: parent.height - parent.height*barGraph.divisionsInterval*index/barGraph.maxValue - height/2
+ verticalAlignment: Text.AlignVCenter
+ }
+ }
+ }
+ Row { // bars
+ id: barsRow
+ anchors {
+ horizontalCenter: parent.horizontalCenter
+ top: parent.top
+ bottom: labelsRow.top
+ }
+ Repeater {
+ id: barsRepeater
+ delegate: Item { //this contains the graph column and positions it correctly
+ width: barGraph.width/8
+ height: parent.height
+ Rectangle {
+ id: bar
+ anchors.bottom: parent.bottom
+ anchors.horizontalCenter: parent.horizontalCenter
+ width: parent.width*2/3
+ radius: width/2
+ property int value: barGraph.valuesArr[index]
+ height: (value/barGraph.maxValue)*parent.height
+ }
+ }
+ }
+ }
+ Row { //labels row
+ id: labelsRow
+ height: Dims.w(5)
+ anchors {
+ bottom: parent.bottom
+ left: barsRow.left
+ right: barsRow.right
+ }
+ Repeater {
+ id: labelsRepeater
+ delegate: Label {
+ width: barGraph.width/8
+ id: dowLabel
+ // anchors.horizontalCenter: parent.horizontalCenter
+ horizontalAlignment: Text.AlignHCenter
+ text: barGraph.labelsArr[index]
+ font.pixelSize: Dims.w(5)
+ }
+ }
+ }
+}
diff --git a/src/main.qml b/src/main.qml
index cfec0c7..e2e4876 100644
--- a/src/main.qml
+++ b/src/main.qml
@@ -21,6 +21,8 @@ import org.asteroid.controls 1.0
import org.asteroid.sensorlogd 1.0
+import "graphs"
+
Application {
id: app
@@ -60,16 +62,19 @@ Application {
}
Item { width: parent.width; height: parent.width*0.1}
+ Label {
+ anchors {
+ left: parent.left
+ margins: app.width*0.1
+ }
+ text: "Steps"
+ }
- Column { //this is the graph of steps for the past week
+ BarGraph {
id: stepsGraph
- width: parent.width*0.9
anchors.horizontalCenter: parent.horizontalCenter
- property var valuesArr: []
- property var labelsArr: []
- property var maxValue: 0
- property var divisionsInterval: 0
- property var divisionsCount: 0
+ width: parent.width*0.9
+ height: app.height*2/3
StepsDataLoader {
id: stepsDataLoader
Component.onCompleted: {
@@ -100,88 +105,7 @@ Application {
maxValue = divisionsInterval*Math.floor(maxValue/divisionsInterval) + (divisionsInterval/5)*Math.ceil((maxValue%divisionsInterval)/(divisionsInterval/5))
divisionsCount = Math.floor(maxValue/divisionsInterval) + 1
console.log(maxValue,divisionsInterval,divisionsCount)
- // now update the repeater so it reloads the data. for some reason a normal qml binding doesn't do it here.
- barsRepeater.model = valuesArr.length
- labelsRepeater.model = valuesArr.length
- }
- Label {
- anchors {
- left: parent.left
- margins: app.width*0.1
- }
- text: "Steps"
- }
- Item {
- height: app.height/2
- anchors {
- margins: app.width*0.05
- left: parent.left
- right: parent.right
- }
- Item {
- id: markerParent
- width: parent.width/8
- height: parent.height
- anchors {
- left: parent.left
- top: barsRow.top
- bottom: barsRow.bottom
- }
- Repeater {
- model: stepsGraph.divisionsCount
- delegate: Label {
- anchors.right: parent.right
- text: stepsGraph.divisionsInterval*index
- font.pixelSize: Dims.w(5)
- y: parent.height - parent.height*stepsGraph.divisionsInterval*index/stepsGraph.maxValue - height/2
- verticalAlignment: Text.AlignVCenter
- }
- }
- }
- Row {
- id: barsRow
- anchors {
- horizontalCenter: parent.horizontalCenter
- top: parent.top
- bottom: labelsRow.top
- }
- Repeater {
- id: barsRepeater
- delegate: Item { //this contains the graph column and positions it correctly
- width: stepsGraph.width/8
- height: parent.height
- Rectangle {
- id: bar
- anchors.bottom: parent.bottom
- anchors.horizontalCenter: parent.horizontalCenter
- width: parent.width*2/3
- radius: width/2
- property int value: stepsGraph.valuesArr[index]
- height: (value/stepsGraph.maxValue)*parent.height
- }
- }
- }
- }
- Row {
- id: labelsRow
- height: Dims.w(5)
- anchors {
- bottom: parent.bottom
- left: barsRow.left
- right: barsRow.right
- }
- Repeater {
- id: labelsRepeater
- delegate: Label {
- width: stepsGraph.width/8
- id: dowLabel
- // anchors.horizontalCenter: parent.horizontalCenter
- horizontalAlignment: Text.AlignHCenter
- text: stepsGraph.labelsArr[index]
- font.pixelSize: Dims.w(5)
- }
- }
- }
+ dataLoadingDone()
}
}
diff --git a/src/resources.qrc b/src/resources.qrc
index 4e26cb8..eb135ca 100644
--- a/src/resources.qrc
+++ b/src/resources.qrc
@@ -2,5 +2,6 @@
<qresource prefix="/">
<file>main.qml</file>
<file>SettingsPage.qml</file>
+ <file>graphs/BarGraph.qml</file>
</qresource>
</RCC>