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
  82             y: (isPortrait ? (statsPage.height / 2.0) : statsColumn.y)
  83
  84             model: statsmodel
  85             delegate: Rectangle {
  86                 width: graphsView.itemWidth
  87                 height: graphsView.height
  88                 color: "transparent"
  89
  90                 SectionHeader {
  91                     id: sectionHeaderItem
  92                     text: "item " + index
  93                 }
  94
  95                 Graph {
  96                     id: graph
  97                     width: parent.width - 2 * Theme.horizontalPageMargin
  98                     anchors.top: sectionHeaderItem.bottom
  99                     height: (isPortrait ? (statsPage.height / 2.0) - Theme.paddingLarge : statsPage.height - Theme.paddingLarge - headerItem.height) - sectionHeaderItem.height
 100                     anchors.horizontalCenter: parent.horizontalCenter
 101                     model: values
 102                     labelsx: labels
 103                     //labelsy: ["0%", "10%", "20%", "30%", "40%", "50%", "60%", "70%", "80%", "90%", "100%"]
 104                     unitsy: "%"
 105                     primary: Theme.primaryColor
 106                     secondary: Theme.highlightColor
 107                     highlight: Theme.highlightColor
 108                     miny: 0.0
 109                     maxy: 1.0
 110                     stepy: 0.1
 111                     gap: 0.1
 112                     fontsize: Theme.fontSizeExtraSmall
 113                     /*
 114                     PropertyAnimation on animate {
 115                         id: animx
 116                         duration: 2000
 117                         easing.type: Easing.InOutExpo
 118                         from: 0.0
 119                         to: 1.0
 120                     }
 121                     */
 122                 }
 123
 124             }
 125         }
 126
 127         /*
 128         Column {
 129             id: graphsColumn
 130             spacing: Theme.paddingLarge
 131             width: isPortrait ? parent.width : parent.width * 0.5
 132             y: (isPortrait ? (statsPage.height / 2.0) : statsColumn.y)
 133             anchors.left: isPortrait ? statsColumn.left : statsColumn.right
 134             anchors.leftMargin: Theme.horizontalPageMargin
 135
 136
 137             Graph {
 138                 id: graph
 139                 width: parent.width - 2 * Theme.horizontalPageMargin
 140                 height: isPortrait ? (statsPage.height / 2.0) - Theme.paddingLarge : statsPage.height - Theme.paddingLarge - headerItem.height
 141                 model: currentStatus.getGraphData()
 142                 labelsx: ["M", "T", "W", "Th", "F", "S", "Su", "A", "B", "C"]
 143                 //labelsy: ["0%", "10%", "20%", "30%", "40%", "50%", "60%", "70%", "80%", "90%", "100%"]
 144                 unitsy: "%"
 145                 primary: Theme.primaryColor
 146                 secondary: Theme.highlightColor
 147                 highlight: Theme.highlightColor
 148                 miny: 0.0
 149                 maxy: 1.0
 150                 stepy: 0.1
 151                 gap: 0.1
 152                 fontsize: Theme.fontSizeExtraSmall
 153                 PropertyAnimation on animate {
 154                     duration: 2000
 155                     easing.type: Easing.InOutExpo
 156                     from: 0.0
 157                     to: 1.0
 158                 }
 159             }
 160         }
 161         */
 162     }
 163 }