display total duration in tooltip - fix #26

This commit is contained in:
Sam 2018-12-31 15:05:23 +01:00
parent 154282e19a
commit 7d98e7342b
5 changed files with 34 additions and 11 deletions

View File

@ -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"}
]
} }
} }

View File

@ -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
} }
/> />

View File

@ -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

View File

@ -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,

View File

@ -1,11 +1,11 @@
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/`
export const thunderforestApiKey = `${ export const thunderforestApiKey = `${
process.env.REACT_APP_THUNDERFOREST_API_KEY process.env.REACT_APP_THUNDERFOREST_API_KEY
}` }`
export const gpxLimit = `${process.env.REACT_APP_GPX_LIMIT_IMPORT}` export const gpxLimit = `${process.env.REACT_APP_GPX_LIMIT_IMPORT}`
export const activityColors = [ export const activityColors = [
'#55a8a3', '#55a8a3',
@ -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 => {