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         Column {
  76             id: graphsColumn
  77             spacing: Theme.paddingLarge
  78             width: isPortrait ? parent.width : parent.width * 0.5
  79             y: (isPortrait ? (statsPage.height / 2.0) : statsColumn.y)
  80             anchors.left: isPortrait ? statsColumn.left : statsColumn.right
  81             anchors.leftMargin: Theme.horizontalPageMargin
  82
  83
  84             Graph {
  85                 id: graph
  86                 width: parent.width - 2 * Theme.horizontalPageMargin
  87                 height: isPortrait ? (statsPage.height / 2.0) - Theme.paddingLarge : statsPage.height - Theme.paddingLarge - headerItem.height
  88                 model: currentStatus.getGraphData()
  89                 labelsx: ["M", "T", "W", "Th", "F", "S", "Su", "A", "B", "C"]
  90                 //labelsy: ["0%", "10%", "20%", "30%", "40%", "50%", "60%", "70%", "80%", "90%", "100%"]
  91                 unitsy: "%"
  92                 primary: Theme.primaryColor
  93                 secondary: Theme.highlightColor
  94                 highlight: Theme.highlightColor
  95                 miny: 0.0
  96                 maxy: 1.0
  97                 stepy: 0.1
  98                 gap: 0.1
  99                 fontsize: Theme.fontSizeExtraSmall
 100                 PropertyAnimation on animate {
 101                     duration: 2000
 102                     easing.type: Easing.InOutExpo
 103                     from: 0.0
 104                     to: 1.0
 105                 }
 106             }
 107         }
 108     }
 109 }