display total duration in tooltip - fix #26
This commit is contained in:
		| @@ -417,6 +417,16 @@ | |||||||
|       "node": { |       "node": { | ||||||
|         "extensions": [".js", ".jsx"] |         "extensions": [".js", ".jsx"] | ||||||
|       } |       } | ||||||
|     } |     }, | ||||||
|  |     "react": { | ||||||
|  |       "createClass": "createReactClass", | ||||||
|  |       "pragma": "React", | ||||||
|  |       "version": "16.6" | ||||||
|  |     }, | ||||||
|  |     "propWrapperFunctions": [ | ||||||
|  |         "forbidExtraProps", | ||||||
|  |         {"property": "freeze", "object": "Object"}, | ||||||
|  |         {"property": "myFavoriteWrapper"} | ||||||
|  |     ] | ||||||
|   } |   } | ||||||
| } | } | ||||||
|   | |||||||
| @@ -91,7 +91,7 @@ class Statistics extends React.Component { | |||||||
|                     tickFormatter={value => displayedData === 'distance' |                     tickFormatter={value => displayedData === 'distance' | ||||||
|                       ? `${value} km` |                       ? `${value} km` | ||||||
|                       : displayedData === 'duration' |                       : displayedData === 'duration' | ||||||
|                         ? format(formatDuration(value), 'HH:mm') |                         ? formatDuration(value) | ||||||
|                         : value |                         : value | ||||||
|                     } |                     } | ||||||
|                   /> |                   /> | ||||||
|   | |||||||
| @@ -1,10 +1,9 @@ | |||||||
| import React from 'react' | import React from 'react' | ||||||
| import { format } from 'date-fns' |  | ||||||
|  |  | ||||||
| import { formatDuration } from '../../utils' | import { formatDuration } from '../../utils' | ||||||
|  |  | ||||||
| const formatValue = (displayedData, value) => displayedData === 'duration' | const formatValue = (displayedData, value) => displayedData === 'duration' | ||||||
|   ? format(formatDuration(value), 'HH:mm') |   ? formatDuration(value, true) | ||||||
|   : displayedData === 'distance' |   : displayedData === 'distance' | ||||||
|     ? value.toFixed(3) |     ? value.toFixed(3) | ||||||
|     : value |     : value | ||||||
|   | |||||||
| @@ -123,7 +123,7 @@ const user = (state = initial.user, action) => { | |||||||
| const statistics = (state = initial.statistics, action) => | const statistics = (state = initial.statistics, action) => | ||||||
|   handleDataAndError(state, 'statistics', action) |   handleDataAndError(state, 'statistics', action) | ||||||
|  |  | ||||||
| export default (history) => combineReducers({ | export default history => combineReducers({ | ||||||
|   activities, |   activities, | ||||||
|   calendarActivities, |   calendarActivities, | ||||||
|   chartData, |   chartData, | ||||||
|   | |||||||
| @@ -1,5 +1,5 @@ | |||||||
| import togeojson from '@mapbox/togeojson' | 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' | import { DateTime } from 'luxon' | ||||||
|  |  | ||||||
| export const apiUrl = `${process.env.REACT_APP_API_URL}/api/` | export const apiUrl = `${process.env.REACT_APP_API_URL}/api/` | ||||||
| @@ -123,10 +123,24 @@ export const formatRecord = (record, tz) => { | |||||||
|   } |   } | ||||||
| } | } | ||||||
|  |  | ||||||
| export const formatDuration = seconds => { | export const formatDuration = (totalSeconds, formatWithDay = false) => { | ||||||
|   let newDate = new Date(0) |   let days = '0' | ||||||
|   newDate = subHours(newDate.setSeconds(seconds), 1) |   if (formatWithDay) { | ||||||
|   return newDate.getTime() |     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 => { | export const formatChartData = chartData => { | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user