Move bar graph into a dedicated component

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>