display total duration in tooltip - fix #26

.eslintrc.json

@@ -417,6 +417,16 @@
       "node": {
         "extensions": [".js", ".jsx"]
       }
-    }
+    },
+    "react": {
+      "createClass": "createReactClass",
+      "pragma": "React",
+      "version": "16.6"
+    },
+    "propWrapperFunctions": [
+        "forbidExtraProps",
+        {"property": "freeze", "object": "Object"},
+        {"property": "myFavoriteWrapper"}
+    ]
   }
 }

fittrackee_client/src/components/Dashboard/Statistics.jsx

@@ -91,7 +91,7 @@ class Statistics extends React.Component {
                     tickFormatter={value => displayedData === 'distance'
                       ? `${value} km`
                       : displayedData === 'duration'
-                        ? format(formatDuration(value), 'HH:mm')
+                        ? formatDuration(value)
                         : value
                     }
                   />

fittrackee_client/src/components/Others/CustomTooltip.jsx

@@ -1,10 +1,9 @@
 import React from 'react'
-import { format } from 'date-fns'
 
 import { formatDuration } from '../../utils'
 
 const formatValue = (displayedData, value) => displayedData === 'duration'
-  ? format(formatDuration(value), 'HH:mm')
+  ? formatDuration(value, true)
   : displayedData === 'distance'
     ? value.toFixed(3)
     : value

fittrackee_client/src/reducers/index.js

@@ -123,7 +123,7 @@ const user = (state = initial.user, action) => {
 const statistics = (state = initial.statistics, action) =>
   handleDataAndError(state, 'statistics', action)
 
-export default (history) => combineReducers({
+export default history => combineReducers({
   activities,
   calendarActivities,
   chartData,

fittrackee_client/src/utils.js

@@ -1,11 +1,11 @@
 import togeojson from '@mapbox/togeojson'
-import { addDays, format, parse, startOfWeek, subHours } from 'date-fns'
+import { addDays, format, parse, startOfWeek } from 'date-fns'
 import { DateTime } from 'luxon'
 
 export const apiUrl = `${process.env.REACT_APP_API_URL}/api/`
 export const thunderforestApiKey = `${
   process.env.REACT_APP_THUNDERFOREST_API_KEY
-}`
+  }`
 export const gpxLimit = `${process.env.REACT_APP_GPX_LIMIT_IMPORT}`
 export const activityColors = [
   '#55a8a3',
@@ -123,10 +123,24 @@ export const formatRecord = (record, tz) => {
   }
 }
 
-export const formatDuration = seconds => {
-  let newDate = new Date(0)
-  newDate = subHours(newDate.setSeconds(seconds), 1)
-  return newDate.getTime()
+export const formatDuration = (totalSeconds, formatWithDay = false) => {
+  let days = '0'
+  if (formatWithDay) {
+    days = String(Math.floor(totalSeconds / 86400))
+    totalSeconds %= 86400
+  }
+  const hours = String(Math.floor(totalSeconds / 3600)).padStart(2, '0')
+  totalSeconds %= 3600
+  const minutes = String(Math.floor(totalSeconds / 60)).padStart(2, '0')
+  const seconds = String(totalSeconds % 60).padStart(2, '0')
+  if (formatWithDay) {
+    return `${
+      days === '0' ? '' : `${days}d:`
+    }${
+      hours === '00' ? '' : `${hours}h:`
+    }${minutes}m:${seconds}s`
+  }
+  return `${hours === '00' ? '' : `${hours}:`}${minutes}:${seconds}`
 }
 
 export const formatChartData = chartData => {