qml/pages/Stats.qml

   1 import QtQuick 2.0
   2 import Sailfish.Silica 1.0
   3 import harbour.pedalo.graph 1.0
   4 import "../components"
   5
   6 Page {
   7     id: statsPage
   8
   9     // The effective value will be restricted by ApplicationWindow.allowedOrientations
  10     allowedOrientations: Orientation.All
  11
  12     SilicaFlickable {
  13         id: statsView
  14         anchors.fill: parent
  15         contentHeight: statsColumn.implicitHeight + headerItem.height
  16
  17         VerticalScrollDecorator {}
  18
  19         PageHeader {
  20             id: headerItem
  21             title: qsTr("Stats")
  22         }
  23
  24         Column {
  25             id: statsColumn
  26             spacing: Theme.paddingLarge
  27             width: isPortrait ? parent.width : parent.width * 0.5
  28             y: headerItem.height
  29
  30             InfoRow {
  31                 label: qsTr("Journeys:")
  32                 value: currentStatus.getJourneyCount()
  33                 midlineRatio: 0.7
  34                 midlineMin: Theme.fontSizeSmall * 10
  35                 midlineMax: Theme.fontSizeSmall * 20
  36                 pixelSize: Theme.fontSizeMedium
  37                 labelTextBold: true
  38                 horizontalAlignment: Text.AlignRight
  39             }
  40
  41             InfoRow {
  42                 label: qsTr("Time spent cycling:")
  43                 value: currentStatus.getFormattedTime(currentStatus.getTimeSpentCycling(), 0, 5)
  44                 midlineRatio: 0.5
  45                 midlineMin: Theme.fontSizeSmall * 10
  46                 midlineMax: Theme.fontSizeSmall * 20
  47                 pixelSize: Theme.fontSizeMedium
  48                 labelTextBold: true
  49                 horizontalAlignment: Text.AlignRight
  50             }
  51
  52             InfoRow {
  53                 label: qsTr("Average journey duration:")
  54                 value: currentStatus.getFormattedTime(currentStatus.getAverageDuration(), 1, 5)
  55                 midlineRatio: 0.6
  56                 midlineMin: Theme.fontSizeSmall * 10
  57                 midlineMax: Theme.fontSizeSmall * 20
  58                 pixelSize: Theme.fontSizeMedium
  59                 labelTextBold: true
  60                 horizontalAlignment: Text.AlignRight
  61             }
  62
  63             InfoRow {
  64                 label: qsTr("Speed percentile:")
  65                 value: Math.round(100.0 - currentStatus.getSpeedPercentile() * 100) + "%"
  66                 midlineRatio: 0.7
  67                 midlineMin: Theme.fontSizeSmall * 10
  68                 midlineMax: Theme.fontSizeSmall * 20
  69                 pixelSize: Theme.fontSizeMedium
  70                 labelTextBold: true
  71                 horizontalAlignment: Text.AlignRight
  72             }
  73         }
  74
  75         SlideshowView {
  76             id: graphsView
  77             width: isPortrait ? parent.width : parent.width * 0.5
  78             height: (isPortrait ? statsPage.height / 2.0 : statsPage.height) - Theme.paddingLarge
  79             itemWidth: width
  80             clip: true
  81             anchors.left: isPortrait ? statsColumn.left : statsColumn.right
  82             anchors.leftMargin: 0
  83
  84             y: (isPortrait ? (statsPage.height / 2.0) : statsColumn.y)
  85
  86             onModelChanged: {
  87                 console.log("Model changed");
  88                 model.updateAll();
  89             }
  90
  91             model: statsmodel
  92             delegate: Rectangle {
  93                 width: graphsView.itemWidth
  94                 height: graphsView.height
  95                 color: "transparent"
  96
  97                 SectionHeader {
  98                     id: sectionHeaderItem
  99                     text: title
 100                 }
 101
 102                 Graph {
 103                     id: graph
 104                     width: parent.width - Theme.horizontalPageMargin
 105                     anchors.top: sectionHeaderItem.bottom
 106                     height: (isPortrait ? (statsPage.height / 2.0) - Theme.paddingLarge : statsPage.height - Theme.paddingLarge - headerItem.height) - sectionHeaderItem.height
 107                     anchors.left: parent.left
 108                     model: values
 109                     labelsx: labels
 110                     //labelsy: ["0%", "10%", "20%", "30%", "40%", "50%", "60%", "70%", "80%", "90%", "100%"]
 111                     unitsy: units
 112                     primary: Theme.primaryColor
 113                     secondary: Theme.highlightColor
 114                     highlight: Theme.highlightColor
 115                     miny: minval
 116                     maxy: maxval
 117                     stepy: step
 118                     gap: 0.1
 119                     fontsize: Theme.fontSizeExtraSmall
 120                     /*
 121                     PropertyAnimation on animate {
 122                         id: animx
 123                         duration: 2000
 124                         easing.type: Easing.InOutExpo
 125                         from: 0.0
 126                         to: 1.0
 127                     }
 128                     */
 129                 }
 130
 131             }
 132         }
 133
 134         /*
 135         Column {
 136             id: graphsColumn
 137             spacing: Theme.paddingLarge
 138             width: isPortrait ? parent.width : parent.width * 0.5
 139             y: (isPortrait ? (statsPage.height / 2.0) : statsColumn.y)
 140             anchors.left: isPortrait ? statsColumn.left : statsColumn.right
 141             anchors.leftMargin: Theme.horizontalPageMargin
 142
 143
 144             Graph {
 145                 id: graph
 146                 width: parent.width - 2 * Theme.horizontalPageMargin
 147                 height: isPortrait ? (statsPage.height / 2.0) - Theme.paddingLarge : statsPage.height - Theme.paddingLarge - headerItem.height
 148                 model: currentStatus.getGraphData()
 149                 labelsx: ["M", "T", "W", "Th", "F", "S", "Su", "A", "B", "C"]
 150                 //labelsy: ["0%", "10%", "20%", "30%", "40%", "50%", "60%", "70%", "80%", "90%", "100%"]
 151                 unitsy: "%"
 152                 primary: Theme.primaryColor
 153                 secondary: Theme.highlightColor
 154                 highlight: Theme.highlightColor
 155                 miny: 0.0
 156                 maxy: 1.0
 157                 stepy: 0.1
 158                 gap: 0.1
 159                 fontsize: Theme.fontSizeExtraSmall
 160                 PropertyAnimation on animate {
 161                     duration: 2000
 162                     easing.type: Easing.InOutExpo
 163                     from: 0.0
 164                     to: 1.0
 165                 }
 166             }
 167         }
 168         */
 169     }
 170 }